dib多层嵌套时mouseout事件停止事件冒泡的解决方案

aaron_gzt

于 2015-02-04 10:32:34 发布

阅读量724

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： div嵌套 JavaScript

本文链接：https://blog.youkuaiyun.com/aaron_gzt/article/details/43482959

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

今天遇到一个问题，一个页面上有多层的div嵌套时，写在最外层DIV上的mouseout事件在鼠标移到里层的DIV时也会触发到。这是因为DIV嵌套时，当鼠标移动到内层DIV时已经超出了外层DIV的监听范围，所以会调用到外层DIV中的mouseout事件，解决办法是可以在调用鼠标移出事件前加上以下的判断代码，当返回true时才调用要执行的方法即可。

停止事件冒泡方法：

function isMouseLeaveOrEnter(e, handler) { 
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;  
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;  
    while (reltg && reltg != handler)  
        reltg = reltg.parentNode;  
    return (reltg != handler);  
}

该方法对onmouseover事件也有效。