当鼠标悬停的元素被其他元素覆盖时，mouseout未被触发

Question

我最近发现了一个奇怪的行为，在javascript中使用mouseout事件。 请看我的小提琴：http://jsfiddle.net/Uf3xQ/25/

当我将鼠标悬停在按钮上时，会触发mouseenter事件。当我离开按钮时，mouseout事件被触发。到现在为止还挺好。

现在，当我悬停，然后单击并单击事件显示放置在按钮上的div时，mouseout事件也将被触发。

但是，如果在使用setTimeout的短暂延迟后显示div，则在我移动鼠标之前，不会触发mouseout事件。

你能向我解释这种行为吗？

更新： 我将错误提交给铬并且他们证实了它。在这里看到：http://code.google.com/p/chromium/issues/detail?id=159389

的错误也出现在Opera，Safari浏览器（在普通的WebKit）和IE

Answer 1

我浏览的WebKit的Bugzilla和https://bugs.webkit.org/show_bug.cgi?id=4117似乎是你的错误，你应该添加一个新评论到bug与链接你的测试用例，因为错误中链接的测试用例似乎丢失了（404错误）。

Answer 2

这似乎是一个不起眼的浏览器错误（在Chrome）。 Firefox似乎工作正常。我不确定其他浏览器。

我取代一切与本地的js，这样可以很清楚：

http://jsfiddle.net/qLCY3/4/

Answer 3

尝试使用叠加层上的委托将事件向上冒泡。
编辑 小提琴今天很慢，我最初发布的小提琴没有剪掉我用过的代码。

这是否在小提琴作品使用jQuery版本（1.8.2）中选择 链接jsBIN叉：http://jsbin.com/ugeniq/3/edit

EDIT 2 我才意识到鼠标/过/出不股利没工作。我已经更新了代码，所以现在可以使用和不使用div覆盖。

var fail = true; 

var button = document.getElementById("button"); 
var overlay = document.getElementById("overlay"); 
var log = document.getElementById("log"); 


button.addEventListener('click', function() { 
    if (fail) { 

     // mouseout won't be fired until you move the mouse 
     window.setTimeout(function() { 
      overlay.style.display = 'block'; 
     }, 0); 

    } else { 

     // mouseout event is fired instantly 
     overlay.style.display = 'block'; 

    } 


    log.innerHTML += 'over' + "<br>"; 

}, false); 

button.addEventListener('mouseover', function() { 
    log.innerHTML += 'over' + "<br>"; 
}, false); 

button.addEventListener('mouseout', function() { 
    log.innerHTML += 'out' + "<br>"; 
}, false); 

$(overlay).delegate(button, 'mouseover', function() { 
     log.innerHTML += 'over' + "<br>"; 
}); 

$(overlay).delegate(button, 'mouseout', function() { 
     log.innerHTML += 'out' + "<br>"; 
    }); 

Answer 4

解决此问题的最佳方法是将按钮和叠加层包装起来，并将mouseover和mouseleave更改为此包装。

// HTML

<div class="helper"> 
    <div class="overlay"></div> 
    <button class="button">Foo</button> 
</div> 

// JS

var fail = true; 
$$('.helper').addEvent('mouseover', function() { 
    console.log('over'); 
}); 

$$('.helper').addEvent('mouseleave', function() { 
    console.log('out'); 
}); 

$$('.button').addEvent('click', function() { 
    if(fail) { 

     // mouseout won't be fired until you move the mouse 
     window.setTimeout(function() { 
      $$('.overlay').setStyle('display','block'); 
     }, 0); 

    } else { 

     // mouseout event is fired instantly 
     $$('.overlay').setStyle('display','block'); 

    } 
}); 

Answer 5

只是鼠标移出事件的叠加，使其淡出或任何你想要它做的。我在你的小提琴中发出警报试用它。

$$('.button').addEvent('mouseover', function() { 
console.log('over'); 

}）;

$$('.overlay').addEvent('mouseout', function() { 
    alert("ee"); 

}）;