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

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

---

mouseenter

和

mouseleave

是专有的MS事件（实际上非常好）。如果

myDiv

没有子项，则使用

mouseover

/

mouseout

将产生完全相同的效果

---

注意：这个原始的问题和答案非常古老，而且从那时起，

mouseenter

和

mouseleave

在IE之外就没有得到很好的支持。现在所有的现代浏览器在元素上支持这些事件已经有相当一段时间了。它们通常优先于

mouseover

/

mouseout

，因为后者将通过事件侦听器以及元素本身为元素的每个子元素触发

你很接近。函数名为onmouseover和onmouseout

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

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

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

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

---

onmouseenter和onmouseleave是IE唯一的功能

mouseenter和

mouseleave

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

mouseover

和

mouseout

---

顺便说一下，您可以通过jQuery使用

mouseenter

和

mouseleave

，因为jQuery在非IE浏览器上为您模拟这些事件。有关如何为自己模拟

mouseenter

和

mouseleave

的提示，请参阅。

可能有助于解释事件之间的差异。mouseover和mouseenter是两个不同的东西。这并不能回答问题，是哪个指定了鼠标“in”和“leave”。Mouseover在包含子元素的元素上执行多次。我认为最接近的答案是2月3日的ride。

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

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

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

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