我正在尝试拖放完整的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))在此页:
while bloc永远不会结束。 控制台打印无限:
<div id="resultStats" style="visibility: hidden;">Environ 132 000 résultats<nobr> (0,46 secondes) </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";
}