如何在纯 JavaScript 中检测 mousein 和 mouseleave？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15280531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect mousein and mouseleave in pure JavaScript?
提问by TK123
I can't use jQuery for this part of the project due to various reasons. SO I need to detect this in vanilla js. I tried this but it doesn't work:
由于各种原因，我无法在项目的这一部分使用 jQuery。所以我需要在 vanilla js 中检测到这一点。我试过这个，但它不起作用：
var myDiv = document.getElementById('foo');
myDiv.onmouseenter = function() {
alert('entered');
}
myDiv.onmouseleave = function() {
alert('left');
}
采纳答案by Explosion Pills
mouseenterand mouseleaveare proprietary MS events (that are actually pretty nice). If myDivhas no children, using mouseover/ mouseoutwill have exactly the same effect.
mouseenter并且mouseleave是专有的 MS 事件（实际上非常好）。如果myDiv没有孩子，使用mouseover/mouseout将具有完全相同的效果。
Note:this original question and answer were very old and from a time when mouseenterand mouseleavewere not well supported outside of IE. All modern browsers have supported these events on elements for quite some time now. They are generally preferred over mouseover/mouseoutbecause the latter will trigger for each child of the element with the event listener in addition to the element itself.
注意：这个原始问题和答案非常古老，mouseenter并且mouseleave在 IE 之外没有得到很好的支持。很长一段时间以来，所有现代浏览器都支持元素上的这些事件。它们通常比mouseover/更受欢迎，mouseout因为除了元素本身之外，后者还将为具有事件侦听器的元素的每个子元素触发。
回答by dgvid
The mouseenterand mouseleaveevents are proprietary to Internet Explorer, so if you aren't using IE, they won't work. Use mouseoverand mouseout, instead.
在mouseenter和mouseleave到Internet Explorer事件是专有的，所以如果你不使用IE浏览器，他们将无法正常工作。改用mouseover和mouseout。
By the way, you can use mouseenterand mouseleavevia jQuery because jQuery simulates those events for you on non-IE browsers. See this articlefor tips on how to simulate mouseenterand mouseleavefor yourself.
顺便说一下，您可以使用mouseenter和mouseleave通过 jQuery，因为 jQuery 会在非 IE 浏览器上为您模拟这些事件。有关如何模拟和为自己模拟的提示，请参阅本文。mouseentermouseleave
回答by 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 ...
}
回答by dremme
You are close. The function name is onmouseover and onmouseout
你很近。函数名是 onmouseover 和 onmouseout
var myDiv = document.getElementById('foo');
myDiv.onmouseover = function() {
alert('entered');
}
myDiv.onmouseout = function() {
alert('left');
}
回答by dchiang
Try: var myDiv = document.getElementById('foo');
尝试： var myDiv = document.getElementById('foo');
myDiv.onmouseover = function() {
alert('entered');
}
myDiv.onmouseout = function() {
alert('left');
}
onmouseenter and onmouseleave are IE-only functionality.
onmouseenter 和 onmouseleave 是仅限 IE 的功能。
