我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时，mouseout事件发生，但我不希望它发生，直到鼠标离开父元素，绝对div。
我如何防止mouseout事件从发射时，它击中一个子元素没有jquery。
我知道这与事件冒泡有关，但我没有找到如何解决这个问题的方法。
我在这里找到了一个类似的帖子:如何禁用由子元素触发的鼠标退出事件?
但是，该解决方案使用jQuery。
当前回答
如果您可以访问mouseout方法中事件附加到的元素，则可以使用contains()查看事件是否。relatedTarget是否是子元素。
事件。relatedTarget是鼠标传递到的元素，如果它不是子元素，则您已经将鼠标移出了元素。
div.onmouseout = function (event) {
if (!div.contains(event.relatedTarget)) {
// moused out of div
}
}
其他回答
对于在大多数情况下都有效的更简单的纯CSS解决方案，可以通过将子指针事件设置为none来删除它们
.parent * {
pointer-events: none;
}
浏览器支持IE11+
我找到了一个很简单的解决办法，
只需使用onmouseleave="myfunc()"事件，而不是onmousout="myfunc()"事件
在我的代码中，它工作了!!
例子:
<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>
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>
希望能有所帮助。
用onmouseleave代替onmouseout。
你还没有向我们展示你的具体代码，所以我不能在你的具体例子中告诉你如何做到这一点。
但是它很简单:用onmouseleave代替onmouseout。
就是这样:)所以，很简单:)
如果不知道怎么做，请参阅解释:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out
和平的蛋糕:)尽情享受吧。
下面是一个基于下面内容的更优雅的解决方案。 它解释了从一个以上层次的孩子中冒出来的事件。 它还考虑了跨浏览器的问题。
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);
我只是想和你分享一些东西。 我在ng-mouseenter和ng-mouseleave事件中遇到了一些困难。
案例分析:
我创建了一个浮动导航菜单，当光标在图标上时切换。 这个菜单在每一页的最上面。
为了处理菜单上的显示/隐藏，我切换了一个类。 ng-class = " {: vm.isHover} " 切换vm。isHover，我使用ng鼠标事件。 ng-mouseenter = " vm。isHover = true" ng-mouseleave = " vm。isHover = false"
目前，一切都很好，并按预期工作。 解决方法简单明了。
接下来的问题是:
在一个特定的视图中，我有一个元素列表。 当光标在列表元素上时，我添加了一个操作面板。 我使用与上面相同的代码来处理该行为。
存在的问题:
我发现当我的光标在浮动导航菜单上，也在一个元素的顶部，有一个相互冲突。 动作面板显示，浮动导航被隐藏。
问题是，即使光标在浮动导航菜单上，列表元素ng-mouseenter也会被触发。 这对我来说毫无意义，因为我认为鼠标传播事件会自动中断。 我必须说我很失望，我花了一些时间来找出那个问题。
第一个想法:
我试着用这些:
$ event.stopPropagation () $ event.stopImmediatePropagation ()
我结合了很多ng指针事件(mouemove, mouveover，…)，但没有一个帮助我。
CSS解决方案:
我用一个简单的css属性找到了解决方案，我越来越多地使用它:
pointer-events: none;
基本上，我这样使用它(在我的列表元素上):
ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"
有了这个棘手的，ng-mouse事件将不再被触发，我的浮动导航菜单将不再关闭自己，当光标在它和列表中的一个元素上时。
更进一步说:
正如你所期望的，这个解决方案可行，但我不喜欢它。 我们无法控制事态发展，这很糟糕。 另外，你必须有访问虚拟机的权限。实现这个目标是有可能的，可能是不可能的，但在某种程度上是肮脏的。 如果有人想看的话，我可以做一把小提琴。
然而，我没有其他的解决方案…… 说来话长，我不能给你土豆，所以请原谅我的朋友。 不管怎样，指针事件:没有是生命，所以记住它。
