Javascript 在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4697758/
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
Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
提问by John
I am having trouble with the onmouseoutfunction in an absolute positoned div. When the mouse hits a child element in the div, the mouseout event fires, but I do not want it to fire until the mouse is out of the parent, absolute div.
我onmouseout在绝对定位的 div中遇到了该函数的问题。当鼠标击中 div 中的子元素时，mouseout 事件会触发，但我不希望它在鼠标离开父级绝对 div 之前触发。
How can I prevent the mouseoutevent from firing when it hits a child element WITHOUT jquery.
mouseout当它击中没有 jquery 的子元素时，如何防止事件触发。
I know this has something to do with event bubbling, but I am having no luck on finding out how to work this out.
我知道这与事件冒泡有关，但我没有找到如何解决这个问题的运气。
I found a similar post here: How to disable mouseout events triggered by child elements?
我在这里找到了一个类似的帖子：如何禁用由子元素触发的鼠标退出事件？
However that solution uses jQuery.
但是，该解决方案使用 jQuery。
采纳答案by Amjad Masad
function onMouseOut(event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
alert('MouseOut');
// handle mouse event here!
}
document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);
I made a quick JsFiddle demo, with all the CSS and HTML needed, check it out...
我做了一个快速的 JsFiddle 演示，包含所有需要的 CSS 和 HTML，检查出来......
EDITFIXED link for cross-browser support http://jsfiddle.net/RH3tA/9/
编辑跨浏览器支持的固定链接http://jsfiddle.net/RH3tA/9/
NOTEthat this only checks the immediate parent, if the parent div had nested children then you have to somehow traverse through the elements parents looking for the "Orginal element"
请注意，这仅检查直接父级，如果父级 div 具有嵌套的子级，那么您必须以某种方式遍历父级元素以查找“原始元素”
EDITexample for nested children
嵌套子项的编辑示例
EDITFixed for hopefully cross-browser
编辑修复了希望跨浏览器
function makeMouseOutFn(elem){
var list = traverseChildren(elem);
return function onMouseOut(event) {
var e = event.toElement || event.relatedTarget;
if (!!~list.indexOf(e)) {
return;
}
alert('MouseOut');
// handle mouse event here!
};
}
//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);
//quick and dirty DFS children traversal,
function traverseChildren(elem){
var children = [];
var q = [];
q.push(elem);
while (q.length > 0) {
var elem = q.pop();
children.push(elem);
pushAll(elem.children);
}
function pushAll(elemArray){
for(var i=0; i < elemArray.length; i++) {
q.push(elemArray[i]);
}
}
return children;
}
And a new JSFiddle, EDITupdated link
和一个新的JSFiddle，编辑更新的链接
回答by PHPWannaBePro
Use onmouseleave.
使用onmouseleave.
Or, in jQuery, use mouseleave()
或者，在 jQuery 中，使用 mouseleave()
It is the exact thing you are looking for. Example:
这正是您正在寻找的东西。例子：
<div class="outer" onmouseleave="yourFunction()">
<div class="inner">
</div>
</div>
or, in jQuery:
或者，在 jQuery 中：
$(".outer").mouseleave(function(){
//your code here
});
an example is here.
一个例子是here。
回答by Zach Saucier
For a simpler pure CSS solutionthat works in some cases (IE11 or newer), one could remove children's pointer-eventsby setting them to none
对于在某些情况下（IE11 或更新版本）工作的更简单的纯 CSS 解决方案，可以pointer-events通过将其设置为none
.parent * {
pointer-events: none;
}
回答by Sam-Elie
Here's a more elegant solution based on what came below. it accounts for event bubbling up from more than one level of children. It also accounts for cross-browser issues.
这是基于以下内容的更优雅的解决方案。它解释了从多个级别的孩子冒出来的事件。它还说明了跨浏览器问题。
function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
if (e.parentNode == this|| e == this) {
if(e.preventDefault) e.preventDefault();
return false;
}
e = e.parentNode;
}
//Do something u need here
}
document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);
回答by Lawrence Mok
Thanks to Amjad Masad that inspired me.
感谢 Amjad Masad 启发了我。
I've the following solution which seems to work in IE9, FF and Chrome and the code is quite short (without the complex closure and transverse child things) :
我有以下似乎适用于 IE9、FF 和 Chrome 的解决方案，并且代码很短（没有复杂的闭包和横向子事物）：
DIV.onmouseout=function(e){
// check and loop relatedTarget.parentNode
// ignore event triggered mouse overing any child element or leaving itself
var obj=e.relatedTarget;
while(obj!=null){
if(obj==this){
return;
}
obj=obj.parentNode;
}
// now perform the actual action you want to do only when mouse is leaving the DIV
}
回答by Jamie Brown
If you're using jQuery you can also use the "mouseleave" function, which deals with all of this for you.
如果您使用 jQuery，您还可以使用“mouseleave”功能，它为您处理所有这些。
$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);
do_something will fire when the mouse enters thetargetdiv or any of its children, do_something_else will only fire when the mouse leaves thetargetdiv and any of its children.
do_something 会在鼠标进入目标 div 或其任何孩子时触发，do_something_else 只会在鼠标离开目标 div 及其任何孩子时触发。
回答by kavi
instead of onmouseout use onmouseleave.
而不是 onmouseout 使用 onmouseleave。
You haven't showed to us your specific code so I cannot show you on your specific example how to do it.
您尚未向我们展示您的特定代码，因此我无法在您的具体示例中向您展示如何操作。
But it is very simple: just replace onmouseout with onmouseleave.
但它非常简单：只需将 onmouseout 替换为 onmouseleave。
That's all :) So, simple :)
这就是全部:) 所以，很简单:)
If not sure how to do it, see explanation on:
如果不确定如何操作，请参阅以下说明：
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out
Peace of cake :) Enjoy it :)
蛋糕的和平:) 享受它:)
回答by Jean-Philippe
Try mouseleave()
尝试 mouseleave()
Example :
例子 ：
<div id="parent" mouseleave="function">
<div id="child">
</div>
</div>
;)
;)
回答by Ruben
I think Quirksmodehas all the answers you need (different browsers bubbling behaviour and the mouseenter/mouseleaveevents), but I think the most common conclusion to that event bubbling mess isthe use of a framework like JQuery or Mootools (which has the mouseenterand mouseleaveevents, which are exactly what you intuited would happen).
我认为Quirksmode有你需要的所有答案（不同的浏览器冒泡行为和mouseenter/mouseleave事件），但我认为事件冒泡混乱的最常见结论是使用像 JQuery 或 Mootools 这样的框架（它有mouseenter和mouseleave事件，这正是您直觉上会发生的）。
Have a look at how they do it, if you want, do it yourself
oryou can create your custom"lean mean" version of Mootools with just the event part (and its dependencies).
看看他们是怎么做的，如果你愿意，自己做，
或者你可以创建你的自定义“精益”版本的 Mootools 只包含事件部分（及其依赖项）。
回答by Arminius
I've found a very simple solution,
我找到了一个非常简单的解决方案，
just use the onmouseleave="myfunc()" event than the onmousout="myfunc()" event
只使用 onmouseleave="myfunc()" 事件而不是 onmousout="myfunc()" 事件
In my code it worked!!
在我的代码中它起作用了！！
Example:
例子：
<html>
<head>
<script type="text/javascript">
function myFunc(){
document.getElementById('hide_div').style.display = 'none';
}
function ShowFunc(){
document.getElementById('hide_div').style.display = 'block';
}
</script>
</head>
<body>
<div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
Hover mouse here
<div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
CHILD <br/> It doesn't fires if you hover mouse over this child_div
</div>
</div>
<div id="hide_div" >TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>
Same Example with mouseout function:
与 mouseout 功能相同的示例：
<html>
<head>
<script type="text/javascript">
function myFunc(){
document.getElementById('hide_div').style.display = 'none';
}
function ShowFunc(){
document.getElementById('hide_div').style.display = 'block';
}
</script>
</head>
<body>
<div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
Hover mouse here
<div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
CHILD <br/> It fires if you hover mouse over this child_div
</div>
</div>
<div id="hide_div">TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>
Hope it helps :)
希望能帮助到你 ：）
