Javascript,永不结束循环,在调试器中工作正常,elementFromPoint()

时间:2017-06-06 08:43:11

标签: javascript javascript-debugger

我正在尝试拖放完整的JS,白棋撤销和滚轮选择器。

在一个非常特殊的情况下,我遇到了一个奇怪的问题:

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++;
    }

当我在谷歌搜索页面中使用结果计数的脚本时 (Environ 12700résultats(0,70 secondes))在此页:

https://www.google.fr/search?q=sdfh&oq=sdfh&aqs=chrome..69i57j0l5.743j0j8&client=ubuntu&sourceid=chrome&ie=UTF-8

while bloc永远不会结束。 控制台打印无限:

<div id="resultStats" style="visibility: hidden;">Environ 132&nbsp;000&nbsp;résultats<nobr> (0,46&nbsp;secondes)&nbsp;</nobr></div>

但是,如果我暂停在调试器中输入我的脚本,那么while工作正常(elementTemp更改直到退出时);

有人明白吗? (我正在使用铬)。

这是完整的代码段: (要在dragmod中输入,请在控制台中键入activeDrag())

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<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)>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 && event.ctrlKey){
        undo();
    }
}

function wheelController(e,array){
    lightDown(element);
    if (e.deltaY<0){
        if (selector<array.lenght-1){
            selector++;
        }
    }
    else if (selector>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";
    
}

0 个答案:

没有答案