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

Question

由于种种原因，我无法在项目的这一部分使用jQuery。 所以我需要在香草js中检测到这一点。 我试过了，但是没有用：

http://jsfiddle.net/qHfJD/

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

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

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

Answer 1

mouseenter和mouseleave事件是Internet Explorer专有的，因此，如果您不使用IE，它们将无法工作。 改用mouseover和mouseout 。

顺便说一下，您可以通过jQuery使用mouseenter和mouseleave ，因为jQuery在非IE浏览器上为您模拟了这些事件。 有关如何自己模拟mouseenter和mouseleave提示，请参阅本文 。

Answer 2

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 3

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

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

注意：这个原始的问题和答案非常古老，并且在IE之外对mouseenter和mouseleave支持不佳的时代开始。 现在所有现代浏览器都已在元素上支持这些事件。 通常，它们优于mouseover / mouseout因为后者会使用元素侦听器为元素的每个子元素触发，除了元素本身之外。

Answer 4

你近了 函数名称是onmouseover和onmouseout

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

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

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

Answer 5

试试：var myDiv = document.getElementById（'foo'）;

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

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

onmouseenter和onmouseleave是仅IE的功能。