「懸停菜單」中的'onmouseout'的意外行爲

我試圖創建一個'懸停菜單' - 將鼠標懸停在標題上，然後在其下方出現一個菜單框 - 我希望它在您當時消失將鼠標移動到其外部。「懸停菜單」中的'onmouseout'的意外行爲

將鼠標懸停在 '東西' - 下面顯示的菜單框。現在開始慢慢移動鼠標光標 - 下來 - 一旦你通過第一項 - 它消失了！這是而不是所需的操作。
顯然，我onmouseout定義是在#menuStuffDIV - 你可以清楚地螢火蟲它的尺寸看到的 - 它需要整個列表的寬度和高度 -
所以....爲什麼它火後移動從第一個列表項目下來？遊標仍然在div的邊界內 - 這裏發生了什麼？

來源

2013-10-27 Yuval A.

問題標題很奇怪。 –

好吧，我會把它改成無聊的。 –

它不是關於有趣的無聊，它關於與你的問題的相關性，以便你可以從別人那裏得到更好的幫助，因爲這個問題本身很好。爲什麼讓它得到消極的 –

而不是的onmouseout使用OnMouseLeave在：

<div id="menuStuff" class="hover-menu" onmouseleave="$('#menuStuff').hide();" >

的jsfiddle - >http://jsfiddle.net/kzJ8y/1/

來源

2013-10-27 08:10:23 Krasimir

將鼠標了層導致事件冒泡兒童元素：

在您可能需要當鼠標離開一個層，以便它可以被關閉知道基於層的導航。因此，您向該圖層註冊一個onmouseout事件處理程序。但是，當鼠標離開圖層內的任何元素時，事件冒泡也會導致此事件處理程序觸發。

-------------- 
| Layer  |.onmouseout = doSomething; 
| -------- | 
| | Link | ----> We want to know about this mouseout 
| |  | | 
| -------- | 
| -------- | 
| | Link | | 
| | ----> | but not about this one 
| -------- | 
-------------- 
---->: mouse movement

另一個顯示塞是，當你將鼠標移動到該層，然後到一個鏈接時，瀏覽器層上註冊mouseOut事件！對我來說這沒什麼意義（鼠標仍在圖層中），但所有瀏覽器都贊同這一點。

那麼我們如何拒絕鼠標實際離開圖層時不會發生的任何鼠標移動？

function doSomething(e) { 
if (!e) var e = window.event; 
var tg = (window.event) ? e.srcElement : e.target; 
if (tg.nodeName != 'DIV') return; 
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; 
while (reltg != tg && reltg.nodeName != 'BODY') 
    reltg= reltg.parentNode 
if (reltg== tg) return; 
// Mouseout took place when mouse actually left layer 
// Handle event 
}

首先獲取事件目標，即。鼠標移出的元素。如果目標不是DIV（圖層），立即結束該功能，因爲鼠標確實沒有離開圖層。

如果目標是圖層，我們仍不確定鼠標是否離開圖層或在圖層中輸入了鏈接。因此，我們要檢查事件的relatedTarget/toElement，即。鼠標移動到的元素。

我們讀出這個元素，然後我們要向上移動DOM樹，直到遇到事件的目標（即DIV）或body元素。

如果我們遇到目標，鼠標將移動到圖層的子元素，因此鼠標實際上並未離開圖層。我們停止了這個功能。

當函數在所有這些檢查中倖存時，我們確定鼠標實際上離開了圖層，我們可以採取適當的操作（通常使圖層不可見）。

的mouseenter和鼠標離開：

微軟有另一種解決方案。它創建了兩個新事件mouseenter和mouseleave。它們幾乎與mouseover和mouseout相同，只是它們不會對事件冒泡作出反應。因此，他們將整個HTML元素註冊爲一個實體塊，並且不會對塊內發生的鼠標懸停和滾動操作做出反應。

因此，使用這些事件也解決了我們的問題：它們只對它們註冊的元素的鼠標懸停/跳出作出反應。

目前，這些事件僅在Windows和更高版本的Explorer 5.5上受支持。也許其他瀏覽器供應商會複製這些事件。

所以最好使用mouseleave而不是mouseout，因爲它會引起事件冒泡。

來源

2013-10-27 07:59:43

對不起，這不是理想的結果 - 一旦你嘗試在菜單框中移動，它就會消失，這個。 –

我對你的問題做了全面的研究，發現瞭解決方案。我已經更新了我的答案。請檢查一下。 –

如果您正在使用jQuery你可以使用在DIV MouseLeave事件：

http://jsfiddle.net/Kjdc5/

$('#menuStuff').mouseleave(function(){ 
    $('#menuStuff').hide(); 
});

來源

2013-10-27 07:59:57 Phil

「懸停菜單」中的'onmouseout'的意外行爲

回答

相關問題