如何在纯JavaScript中检测mousein和mouseleave？

Question

由于各种原因,我无法在项目的这一部分使用jQuery.所以我需要在vanilla js中检测到这一点.我试过这个,但它不起作用:

http://jsfiddle.net/qHfJD/

var myDiv = document.getElementById('foo');

myDiv.onmouseenter = function() { 
    alert('entered');
}

myDiv.onmouseleave = function() { 
    alert('left');
}

Answer 1

myDiv.onmouseover = function(event) {
  if (this != event.currentTarget) { return false; }
  // mouse enter ...
}
myDiv.onmouseout = function(event) {
  if (this != event.currentTarget) { return false; }
  // mouse leave ...
}

Answer 2

mouseenter并且mouseleave是专有的 MS 事件（实际上非​​常好）。如果myDiv没有孩子，使用mouseover/mouseout将具有完全相同的效果。

http://jsfiddle.net/qHfJD/1/

注意：这个原始问题和答案非常古老，并且mouseenter在mouseleaveIE 之外没有得到很好的支持。所有现代浏览器在相当长的一段时间内都支持元素上的这些事件。它们通常优于mouseover/ mouseout，因为除了元素本身之外，后者还将通过事件侦听器触发元素的每个子元素。