鼠標事件的怪事

這裏是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); 
}

來源

2010-02-23 Yansky

在Firefox，Chrome或IE8中沒有任何東西出現在我身上。 – 2010-02-23 18:53:30

我忘了提及它的一個greasemonkey腳本。所以你需要安裝greasemonkey才能運行。 – Yansky 2010-02-23 19:01:30

這是mouseout vs mouseleave存在的問題之一。（一個地方IE做了一些正確的事。想象一下！）

當你移動到一個子元素時，Mouseout會觸發，而當你離開元素和所有子元素時，mouseleave只會觸發。

有關更多信息，請參閱http://www.quirksmode.org/dom/events/index.html#t28。

來源

2010-02-23 19:07:14 Joel

啊，那正是發生了什麼事情。感謝您的鏈接。現在我知道該怎麼去google了，我發現了這篇文章：http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-瀏覽器/ 再次感謝。 :) – Yansky 2010-02-23 19:30:03

我沒有看到任何懸停<div> S，但會不會是你必須出現在<div>實際上並不是其子，阻斷<div>的東西嗎？如果你這樣做，你的鼠標將超過該元素，而不是<div>,，所以你的鼠標事件將被觸發。

來源

2010-02-23 19:01:37 garann

可能，但我已經給了div一個50的z-索引，並且位置：絕對的，那麼這是不是意味着它位於所有的頂部？ – Yansky 2010-02-23 19:08:01

鼠標事件的怪事

回答

相關問題