javascript - 如何在纯 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和事件是 Internet Explorer 专有的mouseleave，因此如果您不使用 IE，它们将无法工作。使用mouseoverandmouseout代替。

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

Answer 3

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

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

注意：这个原始问题和答案非常古老，并且mouseenter在mouseleaveIE 之外没有得到很好的支持。很长一段时间以来，所有现代浏览器都支持元素上的这些事件。它们通常比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 独有的功能。