'Mouse event weirdness

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

Solution 1:^[1]

I don't see any <div>s on hover, but could it be that you have something appearing over the <div> that's not actually its child, blocking the <div>? If you did, your mouse would be over that element, not the <div>, so your mouseout event would get triggered..

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	garann

'Mouse event weirdness

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]