当悬停父绝对div的子元素而没有jQuery时，防止onmouseout

Question

我onmouseout在绝对位置div中的函数遇到麻烦。当鼠标点击div中的一个子元素时，将触发mouseout事件，但是我不希望它触发，直到鼠标不在父绝对div之外。

我如何防止mouseout事件在没有jquery的情况下击中子元素而触发。

我知道这与事件冒泡有关，但是我没有运气去寻找解决方法。

我在这里找到了类似的帖子：如何禁用由子元素触发的mouseout事件？

但是，该解决方案使用jQuery。

Answer 1

使用onmouseleave。或者，在jQuery中，使用 mouseleave()这正是您要寻找的东西。例：<div class="outer" onmouseleave="yourFunction()">&nbsp; &nbsp; <div class="inner">&nbsp; &nbsp; </div></div>或者，在jQuery中：$(".outer").mouseleave(function(){&nbsp; &nbsp; //your code here});

Answer 2

这是一个基于以下内容的更优雅的解决方案。它导致事件从多个级别的儿童中冒出来。它还解决了跨浏览器问题。function onMouseOut(this, event) {//this is the original element the event handler was assigned to&nbsp; &nbsp;var e = event.toElement || event.relatedTarget;//check for all children levels (checking from bottom up)while(e && e.parentNode && e.parentNode != window) {&nbsp; &nbsp; if (e.parentNode == this||&nbsp; e == this) {&nbsp; &nbsp; &nbsp; &nbsp; if(e.preventDefault) e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; e = e.parentNode;}//Do something u need here}document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);