您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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);

我制作了一个快速的Jsfiddle演示,其中包含所有需要的CSS和HTML,请查看…

,这仅检查直接父级,如果父级div嵌套了子级,则您必须以某种方式遍历父级元素以寻找“原始元素”

示例

固定为希望跨浏览器

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;
}
JS 2022/1/1 18:14:15 有572人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶