title: Javascript, Never ending loop, working fine in debugger, elementFromPoint()
body: <p>I am trying to implement a drag and drop in full JS, whit undo and wheel selector.</p>
  
  <p>i encounter a strange issue whit this bloc in a very particular case:</p>
  
  <pre><code>var elementTemp = document.elementFromPoint(startx, starty);
  if (elementTemp !== null) {
  
      var array=[];
      array.lenght=0;
      var visibilitys=[];
      var cpt=0;
      //getting all the elements under the mouse in visibilitys
      while (elementTemp!==document.documentElement){
          console.log(elementTemp);
          visibilitys[cpt]=elementTemp.style.visibility;
          array[cpt]=elementTemp;
  
          elementTemp.style.visibility = "hidden";
          elementTemp = document.elementFromPoint(startx, starty);
          cpt++;
          array.lenght++;
      }
  </code></pre>
  
  <p>when i use the script in a google search page on the result count number
  (Environ 12 700 résultats (0,70 secondes) ) in this page:</p>
  
  <p><a href="https://www.google.fr/search?q=sdfh&amp;oq=sdfh&amp;aqs=chrome..69i57j0l5.743j0j8&amp;client=ubuntu&amp;sourceid=chrome&amp;ie=UTF-8" rel="nofollow noreferrer">https://www.google.fr/search?q=sdfh&amp;oq=sdfh&amp;aqs=chrome..69i57j0l5.743j0j8&amp;client=ubuntu&amp;sourceid=chrome&amp;ie=UTF-8</a></p>
  
  <p>The while bloc never end.
  Console print infinetely:</p>
  
  <pre><code>&lt;div id="resultStats" style="visibility: hidden;"&gt;Environ 132&amp;nbsp;000&amp;nbsp;résultats&lt;nobr&gt; (0,46&amp;nbsp;secondes)&amp;nbsp;&lt;/nobr&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However, if i pause the script, which enter me in debugger, the while is working fine (elementTemp change until exiting while);</p>
  
  <p>Do someone understand? (I am using chrome). </p>
  
  <p>Here is full snippet:
  (to enter in dragmod, type activeDrag() in console)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var handlerMove;
  var handlerUp;
  var handlerExecOnce;
  var handlerWheel;
  
  var modified=[];
  var selector=0;
  var truebase;
  var offx;
  var offy;
  var element;
  var startx;
  var starty;
  var masque;
  var ctx;
  var masqueStyle='rgba(0, 0, 255, 0.3)';
  
  function moveTo(x, y, element) {
      element.style.left = x + "px";
      element.style.top = y + "px";
  }
  
  function activeDrag() {
      //debugger;
      window.addEventListener('mousedown', dragmod, true)
      masque = document.createElement("CANVAS");
      masque.style.display="none";
      masque.style.position="absolute";
      document.documentElement.appendChild(masque);
      ctx=masque.getContext("2d");
      return 'dragmod on'
      //debugger;
  }
  
  function dragmod(event) {
      //debugger;
      console.log('mousedown')
      startx=event.clientX;
      starty=event.clientY;
  
      var elementTemp = document.elementFromPoint(startx, starty);
      if (elementTemp !== null) {
          //debugger;
          //element.style.position = 'absolute';// à changer
          
  
          
         //récuperation de l'élément le plus "en dessous"
          var array=[];
          array.lenght=0;
          var displays=[];
          var cpt=0;
          while (elementTemp!==document.documentElement){
               //debugger;
              console.log(elementTemp);
              displays[cpt]=elementTemp.style.visibility;
              array[cpt]=elementTemp;
              
              elementTemp.style.visibility = "hidden";
              elementTemp = document.elementFromPoint(startx, starty);
              cpt++;
              array.lenght++;
          }
  
          for (var i=0; i&lt;cpt ; i++){
              array[i].style.visibility = displays[i];
          }
          
  
  
          //select the good one; first by defautl
          element=array[0];
          lightUp(element);
          
          handlerWheel=function (e){
              e.preventDefault();
              e.stopPropagation();
              e.stopImmediatePropagation();
              wheelController(e,array);
                  
              
          }
          window.addEventListener('wheel',handlerWheel);
      
          //console.log(element);
        
          
      
          handlerUp=function (e){
              /*if (element.style.left !== beforex || element.style.top !=beforey){//@todo pas passer tout l'élement (lourd)
                  obj={
                      elemref:element,
                      x:beforex,
                      y:beforey
                  }
                  modified.push(obj);
              }*/
              listenMouseUp(e);
              e.stopPropagation();//todo marche pas
              e.preventDefault();
              e.stopImmediatePropagation;
          }
  
          handlerExecOnce=function (event){
              executeOnce(event);
        
              //console.log(modified);
          }
  
          window.addEventListener('mousemove',handlerExecOnce,true)
  
          window.addEventListener('mouseup', handlerUp,true);
  
          document.addEventListener('keydown', keyController);
          
  
  
      }
  }
  
  
  function listenMouseMove(event, offx, offy) {
      //debugger;
      console.log('mousemove')
      moveTo(event.clientX + offx, event.clientY + offy, element);
  
  }
  
  function listenMouseUp(event) {
      //debugger;
      console.log('mouseup');
      window.removeEventListener('mousemove', handlerMove);
      window.removeEventListener('mouseup', handlerUp,true);
      window.removeEventListener('mousemove', handlerExecOnce,true);
      element.removeEventListener('click',eventStopper,true);
      document.removeEventListener('onkeypress',keyController);
      lightDown(element);
  }
  
  function closeDragmod() {
      window.removeEventListener('mousedown', dragmod);
      return 'dragmod off';
  }
  
  function eventStopper(e){
      e.stopPropagation();
      e.preventDefault();
  }
  
  function undo(){
      console.log('undo');
      //debugger;
      var obj = modified.pop();
      if (obj!=null){
          obj.elem.left=obj.ancientx;
          obj.elem.top=obj.ancienty;
          moveTo(obj.ancientx,obj.ancienty,obj.elem);
          obj.elem.style.position=obj.position;
          //peut etre remettre aussi l'ancienne position??
      }
  }
  
  function getFirstScrollable(elem){
      var parent=elem.parentElement
      while (parent!==window){
  
      }
  }
  
  function executeOnce(event){
      var xcomp=startx-event.clientX;
      var ycomp=starty-event.clientY;
      if (Math.sqrt(xcomp*xcomp+ycomp*ycomp)&gt;10){
          //attaching normal mouseevent
          handlerMove=function (e){
                  listenMouseMove(e, offx+window.scrollX-truebase.x, offy+window.scrollY-truebase.y);
                  e.preventDefault();
              }
          
          window.addEventListener('mousemove',handlerMove);
          
          element.addEventListener('click', eventStopper,true);
          lightDown(element);
          window.removeEventListener('wheel',handlerWheel);
          truebase=getTrueBase(element);
      //debugger;
      
          var obj={
              elem:element,
              basex:truebase.x,
              basey:truebase.y,
              ancientx:element.offsetLeft,
              ancienty:element.offsetTop,
              position:element.style.position
          }
          var elementRectangle = element.getBoundingClientRect();
  
          offx = elementRectangle.left - event.clientX;
          offy = elementRectangle.top - event.clientY;
          modified.push(obj);
          element.style.position='absolute';// necessaire? relative?
          window.removeEventListener('mousemove', handlerExecOnce,true);
          }
  }
  
  function keyController(e){
      if(event.keyCode == 90 &amp;&amp; event.ctrlKey){
          undo();
      }
  }
  
  function wheelController(e,array){
      lightDown(element);
      if (e.deltaY&lt;0){
          if (selector&lt;array.lenght-1){
              selector++;
          }
      }
      else if (selector&gt;0){
          selector--;
      }
      element=array[selector];
      lightUp(element);
  
      
  }
  
  
  function getTrueBase(elem){
      var basex=0;
      var basey=0;
      elem=elem.offsetParent;
      while (elem){
          basex+=elem.offsetLeft
          basey+=elem.offsetTop
          elem=elem.offsetParent
      }
      return {
          x:basex,
          y:basey
      }
  }
  
  function lightUp(htmlElement){//adding transparent mask
      //debugger;
      var elementRectangle = htmlElement.getBoundingClientRect();
      console.log("lighting up", htmlElement.offsetLeft,masque);
  
      moveTo(elementRectangle.left+window.scrollX,elementRectangle.top+window.scrollY, masque);
  
      var w= elementRectangle.width;
      var h= elementRectangle.height;
  
      masque.width  = w;
      masque.height = h;
      ctx.fillStyle=masqueStyle;// si je fais pas ça, le context style se détruit quand je change la taille todo pk?
      ctx.fillRect(0, 0, w, h);
      masque.style.display="inline";
      
  }
  
  function lightDown(htmlElement){
      masque.style.display="none";
      
  }</code></pre>
  </div>
  </div>
  </p>