防止onmouseout当悬浮父元素的绝对div不使用jQuery [英] Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

问题描述

您好！我在绝对定位的div中的 onmouseout 函数有麻烦。当鼠标击中div中的一个子元素时，mouseout事件触发，但我不希望它触发，直到鼠标离开父代，绝对div。

我如何防止 mouseout 事件触发子元素WITHOUT jquery时触发。

我知道与事件冒泡有关，但我没有运气找到如何工作这出来。

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

但是该解决方案使用jQuery。

解决方案

  function onMouseOut（event）{
 //这是事件处理程序分配给
 var e = event.toElement || event.relatedTarget; 
 if（e.parentNode == this || e == this）{
 return; 
} 
 alert（'MouseOut'）; 
 //在这里处理鼠标事件！ 
} 
 
 
 
 document.getElementById（'parent'）。addEventListener（'mouseout'，onMouseOut，true）; 
  

我做了一个快速的JsFiddle演示，需要所有的CSS和HTML，

EDIT 用于跨浏览器支持的FIXED链接 http ：//jsfiddle.net/RH3tA/9/

注意这只会检查直接父元素，如果父元素div有嵌套的孩子，那么你必须以某种方式遍历元素父母寻找Orginal元素

编辑 >

EDIT 修复了有希望的跨浏览器

  function makeMouseOutFn（elem）{
 var list = traverseChildren（elem）; 
 return function onMouseOut（event）{
 var e = event.toElement || event.relatedTarget; 
 if（!!〜list.indexOf（e））{
 return; 
} 
 alert（'MouseOut'）; 
 //在这里处理鼠标事件！ 
}; 
} 
 
 //使用闭包缓存所有子元素
 var parent = document.getElementById（parent）; 
 parent.addEventListener（'mouseout'，makeMouseOutFn（parent），true）; 
 
 //快速和脏的DFS子程序遍历，
 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  q.push（elemArray [i]）; 
} 
} 
 return children; 
} 
  

还有一个新的 JSFiddle ，修改更新的链接

Hi I am having trouble with the onmouseout function 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.

How can I prevent the mouseout event from firing when it hits a child element WITHOUT 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.

解决方案

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...

EDIT FIXED link for cross-browser support http://jsfiddle.net/RH3tA/9/

NOTE that 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"

EDIT example for nested children

EDIT Fixed 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, EDIT updated link

这篇关于防止onmouseout当悬浮父元素的绝对div不使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！