javascript - 鼠标事件异常

Question

这是我正在处理的 Greasemonkey 脚本(来源如下):http://userscripts.org/scripts/show/69722

您可以在此页面上进行测试:http://forums.whirlpool.net.au/forum/35

将鼠标悬停在主题标题上，会出现一个带有预览的 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);
}

Answer 1

这是 mouseout 与 mouseleave 的问题之一。 (IE 有一个地方做了正确的事情。想象一下!)

Mouseout 在您移入子元素时触发，而 mouseleave 仅在您移出该元素和所有子元素时触发。

参见http://www.quirksmode.org/dom/events/index.html#t28了解更多信息。