Question

Here is the Greasemonkey script I’m working on (source below): http://userscripts.org/scripts/show/69722

You can test it out on this page: http://forums.whirlpool.net.au/forum/35

Hover over a thread title and a div appears with a preview.

The weird thing is, when you move your mouse around on the div, the mouseout event is getting fired for some reason.

Anyone have any ideas as to why this is happening?

// ==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

This is one of the problems with mouseout vs mouseleave. (One place IE did something right. Imagine that!)

Mouseout fires when you move into a child element, whereas mouseleave only fires when you move off the element AND all child elements.

See http://www.quirksmode.org/dom/events/index.html#t28 for more info.