2013-06-26 101 views
2

我運行下面的代碼後,在Firefox一貫射擊:鼠標離開事件不是事件的內容事件

<html> 
<body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('html').on('mouseleave', function(e) {              
      console.log('mouseleave'); 
     }); 
     $('#text1').on('focusout', function() { 
      alert("focusout"); 
      setTimeout(function(){$('#text1')[0].focus();},0); 
     }); 
    }); 
    </script> 
    <input type=text id="text1"> 
</body> 
</html> 

當我把鼠標移動到瀏覽器工具欄/標籤/鏈接/等區域之前我觸發事件的內容事件在文本輸入上,mouseleave事件觸發,我可以按刷新按鈕或任何其他按鈕/選項卡/等。

但是,在我觸發聚焦事件之後,mouseleave事件不再觸發,聚焦輸出使我無法按下該區域中的任何按鈕。

如果我將鼠標從瀏覽器的文檔窗口移動到另一個應用程序或背景或甚至下到螢幕窗口,mouseleave事件會觸發,但當我將鼠標移動到瀏覽器工具欄/ tabs/links /等區域。

但是,如果我手動點擊回到文本輸入,然後鼠標離開再次正常開始正常開火。

只有在Firefox(我使用Firefox 21)中,IE,Chrome或Safari纔會出現此行爲。

任何建議或解釋非常感謝!

達納

回答

1

經過進一步調查,這似乎是一個Firefox的問題,而不是一個jQuery的問題,因爲mouseout事件也無法正常在Firefox在這種情況下開槍。我最終通過使用mousemove並檢查事件的目標和relatedTarget來解決所有這些問題。當這種情況發生時(在彈出警報彈出之後),mousemove事件目標爲空,並且相關目標僅在頁面的菜單部分中未定義,因此通過檢查我們知道我們在該部分並且我們可以處理它適當。

這是我們最後使用的代碼:

$(document).on('mousemove', function(e) { 
     if (!e.target.tagName && !e.relatedTarget) { 
      console.log('mouseleave'); 
     } 
    });