2014-02-23 207 views
1

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

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

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

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

對此有任何修復?

只有簡單的JavaScript解決方案,請(沒有第三方庫)。

+0

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

+0

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

回答

0

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

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

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

+0

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

+0

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

+0

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

0

在鼠標事件中有一個名爲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被觸發。

+0

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

+0

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