我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时，mouseout事件发生，但我不希望它发生，直到鼠标离开父元素，绝对div。
我如何防止mouseout事件从发射时，它击中一个子元素没有jquery。
我知道这与事件冒泡有关，但我没有找到如何解决这个问题的方法。
我在这里找到了一个类似的帖子:如何禁用由子元素触发的鼠标退出事件?
但是，该解决方案使用jQuery。
当前回答
有两种方法可以处理这个问题。
1)检查事件。目标结果在你的回调，看看它是否匹配你的父div
var g_ParentDiv;
function OnMouseOut(event) {
if (event.target != g_ParentDiv) {
return;
}
// handle mouse event here!
};
window.onload = function() {
g_ParentDiv = document.getElementById("parentdiv");
g_ParentDiv.onmouseout = OnMouseOut;
};
<div id="parentdiv">
<img src="childimage.jpg" id="childimg" />
</div>
2)或者使用事件捕获和调用事件。回调函数中的stopPropagation
var g_ParentDiv;
function OnMouseOut(event) {
event.stopPropagation(); // don't let the event recurse into children
// handle mouse event here!
};
window.onload = function() {
g_ParentDiv = document.getElementById("parentdiv");
g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};
<div id="parentdiv">
<img src="childimage.jpg" id="childimg" />
</div>
其他回答
如果您可以访问mouseout方法中事件附加到的元素，则可以使用contains()查看事件是否。relatedTarget是否是子元素。
事件。relatedTarget是鼠标传递到的元素，如果它不是子元素，则您已经将鼠标移出了元素。
div.onmouseout = function (event) {
if (!div.contains(event.relatedTarget)) {
// moused out of div
}
}
对于在大多数情况下都有效的更简单的纯CSS解决方案，可以通过将子指针事件设置为none来删除它们
.parent * {
pointer-events: none;
}
浏览器支持IE11+
如果你添加(或拥有)一个CSS类或id到父元素，那么你可以这样做:
<div id="parent">
<div>
</div>
</div>
JavaScript:
document.getElementById("parent").onmouseout = function(e) {
e = e ? e : window.event //For IE
if(e.target.id == "parent") {
//Do your stuff
}
}
所以只有当事件在父div上时，才会执行东西。
用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);
