防止onmouseout当在子元素的父div jQuery绝对没有

CœurJohn提出了一个问题:Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery,或许与您遇到的问题类似。

回答者chŝdkAmjad 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...

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

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:Eclipse的JavaScript编辑器插件
下一篇:如何判断对象是否在数组中[副本]

相关推荐

  • (深入)使用jQuery复制数组(复制)

    Communitymorgancodes提出了一个问题:(Deep) copying an array using jQuery [duplicate],或许与您遇到的问题类似。

    3 年前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、根据...

    2 年前
  • 默认情况下隐藏div,并在引导下单击显示

    BerylliumOuda提出了一个问题:Hide div by default and show it on click with bootstrap,或许与您遇到的问题类似。

    3 年前
  • 高效的jQuery代码编写技巧总结

    最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。

    4 年前
  • 页面div居中定位

    在编写很多时候页面的时候我们都需要布局居中对齐的,这里引用一个小案例讲解一下水平+垂直居中对齐 预期效果 实现过程 html代码: &lt;body&gt; &lt;div class="m...

    2 年前
  • 非ajax jQuery POST请求

    amit提出了一个问题:non-AJAX jquery POST request,或许与您遇到的问题类似。 回答者Doug Neiner给出了该问题的处理方式: I know what you are...

    3 年前
  • 除了jQuery中单击的元素之外,如何选择所有类?

    Hassan Al-Jeshi提出了一个问题:how to select all class except the clicked element in JQuery?,或许与您遇到的问题类似。

    3 年前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且...

    5 年前
  • 附加一个具有淡入淡出效果的元素[ jQuery ]

    Pablo FernandezTIMEX提出了一个问题:Append an element with fade in effect [jQuery],或许与您遇到的问题类似。

    3 年前
  • 防止在jQuery中双重提交表单

    smhollowayAdam提出了一个问题:Prevent double submission of forms in jQuery,或许与您遇到的问题类似。 回答者Ramon BakkerNatha...

    3 年前

官方社区

扫码加入 JavaScript 社区