JavaScript事件處理程序

我正在嘗試修復mouseenter和mouseleave處理程序的錯誤。JavaScript事件處理程序

listener.addEventListener('mouseenter', function(){ 
    element.style.visibility = "visible"; 
}, true); 

listener.addEventListener('mouseleave', function(){ 
    element.style.visibility = "hidden"; 
}, true);

事件按預期方式工作，除了當我將鼠標移動到閃爍鼠標離開事件的元素上時。

對此有任何修復？

只有簡單的JavaScript解決方案，請（沒有第三方庫）。

來源

2014-02-23 user3330630

當您在對象上快速移動鼠標時，它應該會閃爍，因爲您首先會獲得一個mouseenter，然後是一個mouseleave。你期望發生什麼？ – jfriend00

在任何情況下，你都應該在CSS中用'：hover'來做這個。 –

Javascript中的指針只是「懸停」最頂端（可見）元素。

這意味着如果你已經說了一個背景div，並且「輸入」它時你會在其上顯示另一個div，光標將退出背景以輸入新的div。

也許你可以設置不透明度爲0，而不是隱藏div，並保持它始終「可見」（也將事件處理程序放在出現的div中，而不是在後臺中）。

來源

2014-02-23 18:19:11 6502

這是一個便宜的方式來解決問題，而不是我檢查父母的名單，如果父母是我的元素的事件沒有觸發。請注意，不透明度在早期版本的IE中會出現問題。 – user3330630

@ user3330630：我很早就停止關注IE作者有意打破互聯網並將用戶鏈接到他們的非標準解決方案。 – 6502

那是因爲你不是真正的開發者。對你有一個stackoverflow帳戶感到羞恥。 – user3330630

在鼠標事件中有一個名爲relatedTarget的屬性，它可以幫助您修復它。你應該檢查，如果它不是像該地區：

listener.addEventListener('mouseleave', function(event){ 
    if(!event.relatedTarget || 
     (event.relatedTarget != listener && event.relatedTarget.parentNode != listener)) 
     element.style.visibility = "visible"; 
    else 
     alert("I am still in listener area but mouseleave got triggered :)))"); 
}, true);

這裏的關鍵是，我只檢查了第一父級，但你最好創建一個函數來檢查它的所有DOM樹的listener節點。我的意思是它可能是listener節點中的嵌套子節點之一。

我知道這似乎有點奇怪，但它是這樣，有時當它進入子節點區域mouseleave被觸發。

來源

2014-02-23 18:28:14

@cookiemonster：我更新了我的答案，以澄清這個奇怪的情況。 –

對不起，我已經找到了一個解決方案，我會發布它，當我獲得10聲望。我不會忘記。 – user3330630

JavaScript事件處理程序

回答

相關問題