Podivnost události myši

Zde je skript Greasemonkey, na kterém pracuji (zdroj níže):http://userscripts.org/scripts/show/69722

Můžete si to vyzkoušet na této stránce:http://forums.whirlpool.net.au/forum/35

Umístěte ukazatel myši na název vlákna a zobrazí se div s náhledem.

Zvláštní je, že když pohybujete myší na div, mouseout událost se z nějakého důvodu spouští.

Má někdo nějaké nápady, proč se to děje?

// ==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);
}

Odpověď

Toto je jeden z problémů s mouseout vs mouseleave. (Jedno místo, IE udělal něco správně. Představte si to!)

Mouseout se spustí, když se přesunete do podřízeného prvku, zatímco mouseleave se spustí pouze tehdy, když se přesunete mimo prvek A všechny podřízené prvky.

Další informace najdete na http://www.quirksmode.org/dom/events/index.html#t28.