Fatal编程技术网

Javascript 老鼠事件怪诞

javascript

Javascript 老鼠事件怪诞,javascript,javascript-events,mouseevent,Javascript,Javascript Events,Mouseevent,下面是我正在编写的greasemonkey脚本（来源如下）： 您可以在此页面上进行测试： 将鼠标悬停在线程标题上，将显示一个带有预览的div 奇怪的是，当你在div上移动鼠标时，“mouseout”事件会因为某种原因被触发 有人知道为什么会这样吗 // ==UserScript== // @name Whirlpool Mouseover Thread Title // @namespace blurg! // @description Whirlpool M

下面是我正在编写的greasemonkey脚本（来源如下）：

您可以在此页面上进行测试：

将鼠标悬停在线程标题上，将显示一个带有预览的div

奇怪的是，当你在div上移动鼠标时，“mouseout”事件会因为某种原因被触发

有人知道为什么会这样吗

// ==UserScript==
// @name           Whirlpool Mouseover Thread Title
// @namespace      blurg!
// @description    Whirlpool Mouseover Thread Title Preview
// @include        http://forums.whirlpool.net.au/forum/*
// @version        0.2
// ==/UserScript==


var tPrev={
    reginald:document.URL.match(new RegExp(/\/100$|\/82$|\/9$|\/107$|\/135$|\/80$|\/136$|\/125$|\/116$|\/63$|\/127$|\/139$|\/7$|\/129$|\/130$|\/131$|\/10$|\/38$|\/39$|\/91$|\/87$|\/112$|\/132$|\/8$|\/83$|\/138$|\/58$|\/106$|\/126$|\/35$|\/92$|\/137$|\/114$|\/123$|\/128$|\/18$|\/14$|\/15$|\/68$|\/72$|\/69$|\/94$|\/90$|\/102$|\/105$|\/109$|\/119$|\/108$|\/31$|\/67$|\/5$/)),
    grabTrs:document.querySelectorAll("#threads>table>tbody>tr:not(.pointer):not(.deleted):not(.section) a.title"),
    element:null,
    threadNum:null,
    modal:document.createElement('div'),
    modalFunc:null,
    modalReset:null,
    onModal:null,
    mouseoot:false,
    mousePos:{
        y:0,
        x:0
    },
    tyme:{
        over:0,
        out:0
    },
    sTo:null
};
if(tPrev.reginald){
    GM_addStyle('#tPrev_modal{position:absolute;z-index:50;width:500px;height:200px;background-color:white;border:3px solid grey;display:none;overflow:scroll;font-size:0.8em;}.advertising_block{display:none !important;}');
    tPrev.modal.setAttribute('id','tPrev_modal');
    document.body.appendChild(tPrev.modal);


    /*console.log(tPrev.onModal);
    tPrev.modalReset=function(w){
        clearInterval(tPrev.sTo);
        if(w=='link' && tPrev.onModal){
            return;
        }
        if(w=='div'){
            tPrev.onModal=false;
        }

    };*/
    [].forEach.call(tPrev.grabTrs, function (item) {
        item.addEventListener('mouseover',function(e){
            tPrev.element=this;
            //tPrev.findMousePosition(e);   
            tPrev.mousePos.x = e.clientX+window.pageXOffset;
            tPrev.mousePos.y=(e.clientY+window.pageYOffset)-50;
            tPrev.threadNum=tPrev.element.href.split('t=')[1];
            tPrev.tyme.over=Date.now();
            tPrev.sTo=setInterval(function(){
                if((Date.now()-tPrev.tyme.over)>2000){
                    clearInterval(tPrev.sTo);
                    tPrev.modal.style.display='block';
                    tPrev.modal.style.left=tPrev.mousePos.x+'px';
                    tPrev.modal.style.top=tPrev.mousePos.y+'px';    
                    //tPrev.onModal=true;
                    GM_xmlhttpRequest({
                        method: "GET",
                        url: 'http://74.125.155.132/search?q=cache:forums.whirlpool.net.au/forum-replies-archive.cfm/'+tPrev.threadNum+'.html',
                        onload: function(r) {
                            var rt=r.responseText;  
                            var inOf = rt.indexOf('<td class="bodyuser">');
                            if(inOf>-1){
                                var iH1=rt.substring(inOf,rt.indexOf('<div class="footbar">'));                 
                                tPrev.modal.innerHTML='<tbody><tr>'+iH1;        
                                //console.log('onload '+tPrev.onModal);
                            }
                            else{
                                tPrev.modal.innerHTML='<p style="font-size:1.5em;">Preview not available</p>';
                            }

                        },
                        onerror: function(e) {
                            tPrev.modal.innerHTML='<p style="font-size:1.5em;">Preview not available</p>';
                        }                   
                    });             
                }
            },50);

        }, false);
        item.addEventListener('mouseout',function(e){
            clearInterval(tPrev.sTo);
            //console.log('item mouseout  '+tPrev.onModal);
        }, false);  
    });

    //tPrev.modal.addEventListener('mouseover',function(e){tPrev.onModal=true;console.log('tPrev mouseout  '+tPrev.onModal);}, false);
    tPrev.modal.addEventListener('mouseover',function(e){
        console.log('tPrev mouseover  ');

    }, false);  
    tPrev.mouseoot=tPrev.modal.addEventListener('mouseout',function(ev){
        console.log('tPrev mouseout  ');
        /*tPrev.element=null;
        tPrev.modal.innerHTML='';
        tPrev.modal.style.display='none';
        tPrev.tyme.over=0;*/
        //this.removeEventListener('mouseout', tPrev.mouseoot, false);
    }, false);
}

/==UserScript==
//@name惠而浦鼠标悬停线标题
//@名称空间模糊！
//@description惠而浦鼠标悬停线程标题预览
//@包括http://forums.whirlpool.net.au/forum/*
//@version 0.2
//==/UserScript==
var tPrev={
reginald:document.URL.match（新的RegExp(/\/100$|\/82$|\/9$|\/107$|\/135$|\/80$|\/136$|\/125$|\/116$|\/63$|\/127$|\/139$|\/7$|\/129$|\/130$|\/131$|\/10$|\/38$|\/39$|\/91$|\/87$|\/112$|\/132$|\/8$|\/83$|\/138$|\/58$|\/106$|\/126$|\/35$|\/92$|\/137$|\/114$|\/123$|\/128$|\/18$|\/14$|\/15$|\/68$|\/72$|\/69$|\/94$|\/90$|\/102$|\/105$|\/109$|\/119$|\/108$|\/31$|\/67$|\/5$/)),
grabTrs:document.queryselectoral（#threads>table>tbody>tr:not（.pointer）：not（.deleted）：not（.section）a.title”），
元素：null，
threadNum:null，
模态：document.createElement（'div'），
modalFunc:null，
modalReset:null，
onModal:null，
老鼠：错，
鼠标座：{
y:0，
x:0
},
季姆：{
超过:0,，
输出：0
},
sTo:null
};
如果（tPrev.reginald）{
GM#u addStyle（'#tPrev_model{位置：绝对；z索引：50；宽度：500px；高度：200px；背景色：白色；边框：3px纯灰；显示：无；溢出：滚动；字体大小：0.8em；}。广告块{显示：无！重要；}）；
setAttribute（'id'，'tPrev_modal'）；
document.body.appendChild（tPrev.modal）；
/*console.log（tPrev.onModal）；
tPrev.modalReset=功能（w）{
清除间隔（tPrev.sTo）；
if（w=='link'&&tPrev.onModal）{
返回；
}
如果（w=='div'）{
tPrev.onModal=false；
}
};*/
[]forEach.call（tPrev.grabTrs，函数（项）{
item.addEventListener（'mouseover'，函数（e）{
tPrev.element=this；
//tPrev.findMousePosition（e）；
tPrev.mousePos.x=e.clientX+window.pageXOffset；
tPrev.mousePos.y=（e.clientY+window.pageYOffset）-50；
tPrev.threadNum=tPrev.element.href.split（'t='）[1]；
tPrev.tyme.over=Date.now（）；
tPrev.sTo=setInterval（函数（）{
如果（（Date.now（）-tPrev.tyme.over）>2000）{
清除间隔（tPrev.sTo）；
tPrev.modal.style.display='block'；
tPrev.modal.style.left=tPrev.mousePos.x+'px'；
tPrev.modal.style.top=tPrev.mousePos.y+'px'；
//tPrev.onModal=true；
GMxmlHttpRequest({
方法：“获取”，
网址：'http://74.125.155.132/search?q=cache:forums.whirlpool.net.au/forum-回复archive.cfm/'+tPrev.threadNum+'.html'，
onload：函数（r）{
var rt=r.responseText；
var inOf=rt.indexOf（“”）；
如果（inOf>-1）{
var iH1=rt.substring（inOf，rt.indexOf（“”））；
tPrev.modal.innerHTML=''+iH1；
//console.log（'onload'+tPrev.onModal）；
}
否则{
tPrev.modal.innerHTML='
预览不可用；
}
},
onerror:函数（e）{
tPrev.modal.innerHTML='
预览不可用；
}                   
});             
}
},50);
}，假）；
项目.添加的事件监听器（'mouseout'，函数（e）{
清除间隔（tPrev.sTo）；
//console.log（'item mouseout'+tPrev.onModal）；
}，假）；
});
//tPrev.modal.addEventListener（'mouseover'，函数（e）{tPrev.onModal=true；console.log（'tPrev mouseout'+tPrev.onModal）；}，false）；
tPrev.modal.addEventListener（'mouseover'，函数（e）{
console.log（'tprevmouseover'）；
}，假）；
tPrev.mouseoot=tPrev.modal.addEventListener（'mouseout'，函数（ev）{
console.log（'tprevmouseout'）；
/*tPrev.element=null；
tPrev.modal.innerHTML=''；
tPrev.modal.style.display='none'；
tPrev.tyme.over=0*/
//this.removeEventListener（'mouseout'，tPrev.mouseoot，false）；
}，假）；
}
我没有看到任何
悬停，但可能是您在
上出现了某个不是它的子对象的东西，阻止了
？如果是这样，您的鼠标会在该元素上，而不是
，
上，所以您的鼠标移出事件会被触发。
我没有看到任何
悬停，但是，可能是因为您在
上出现了一些实际上不是它的子对象的东西，阻止了
？如果您这样做了，您的鼠标将位于该元素上，而不是
，
，因此您的mouseout事件将被触发。
这是mouseout vs mouseleave的问题之一。（有一个地方我做对了，想象一下！）

Mouseout在移入子元素时激发，而MouseAve仅在移开该元素和所有子元素时激发


有关更多信息，请参阅。
这是mouseout vs mouseleave的问题之一。（一个地方IE做了正确的事情。想象一下！）

Mouseout在移入子元素时激发，而MouseAve仅在移开该元素和所有子元素时激发


有关更多信息，请参阅。
Firefox、Chrome或IE8中没有为我显示任何内容。我忘了提到它是一种润滑脂