• 所有问题

    • 如何防止鼠标移出移入子元素触发mouseout和mouseover事件

    如题所述

    举报该问题
    推荐答案   2017-03-24
    如何防止鼠标移出移入子元素触发mouseout和mouseover事件:
    关于mouseout和mouseover事件这里就不多介绍了，具体可以参阅javascript的mouseout和mouseover事件详解一章节。
    这两个事件有一个共同特点，那就是当鼠标移入或者移出子元素的时候都会触发对应的事件，这个往往在实际应用中是不需要的，或者说能够带来很大的困扰，下面就通过实例代码介绍一下如何避免此影响。
    代码实例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
    #box{
    width:200px;
    height:200px;
    background-color:red;
    padding:50px;
    }
    #inner{
    width:50px;
    height:50px;
    background-color:blue;
    }
    </style>
    <script type="text/javascript">
    function isMouseLeaveOrEnter(e, handler) {
    var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
    while (reltg && reltg != handler){
    reltg = reltg.parentNode;
    }
    return (reltg != handler);
    }
    window.onload=function(){
    var box=document.getElementById("box");
    var num=document.getElementById("num");
    var count=0;
    box.onmouseout=function(ev){
    var ev=ev||window.event;
    if(!isMouseLeaveOrEnter(ev,box)){
    return false;
    }
    num.innerHTML=count++;
    }
    }
    </script>
    </head>
    <body>
    <div id="box">
    <div id="inner"></div>
    </div>
    <div>事件触发了<span id="num"></span>次</div>
    </body>
    </html>

    以上代码实现了我们的要求，可以消除鼠标指针移入或者移出子元素所带来的困扰，虽然例子只是mouseout事件的，对于mouseover事件也是如此，下面就介绍一下此代码的实现过程:
    一.实现原理:
    当触发这个事件的时候，事件对象都会有一个relatedTarget属性（标准浏览器支持，IE8和IE8以下浏览器需要使用其他属性返回），它能够返回一个与事件目标节点相关的节点，如果返回的节点都是注册事件的对象的子孙元素，说明是我们将要消除的事件触发，所以只要判断如果relatedTarget返回的节点是子孙节点，就进行特殊的处理就可以了，具体可以参阅代码注释。
    二.代码注释:
    1.function
    isMouseLeaveOrEnter(e, handler)
    {}，此函数是功能的核心，可以返回一个布尔值用来标识relatedTarget属性返回的是否是子孙节点，如果返回true说明不是子孙节点，如果是false则说明是子孙节点。第一个参数是事件对象，第二个是注册事件处理函数的对象。
    2.var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement，返回事件关联对象，相关属性可以参阅相关阅读。
    3.while
    (reltg && reltg != handler){reltg =
    reltg.parentNode}，一个while循环，条件是：如果reltg存在并且不是当前注册事件的节点，如果条件不被满足，那么将获取reltg的父节点然后再赋值给reltg，如此循环往复。这个语句的作用是判断相关元素是否值子孙元素，如果是的话，总会有一个reltg.parentNode会和handler相同。
    4.return (reltg != handler)，返回一个布尔值，如果相同就返回false，如果不相同就返回true。
    温馨提示：答案为网友推荐，仅供参考
    相似回答
    如何防止鼠标移出移入子元素触发mouseout和mouseover事件答：1.function isMouseLeaveOrEnter(e, handler){}，此函数是功能的核心，可以返回一个布尔值用来标识relatedTarget属性返回的是否是子孙节点，如果返回true说明不是子孙节点，如果是false则说明是子孙节点。第一个参数是事件对象，第二个是注册事件处理函数的对象。2.var reltg = e.relatedTarget ? e.relate...
    jquery鼠标离开(mouseout)时,会处理一个事务,但是怎么排除鼠标在子元...答：注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。语法 $(selector).mouseleave()实例 x=0; y=0; $(document).ready(function(){ $("div.out").mouseout(funct...
    如何解决mouseover闪动的现象答：解决这个现象的办法有许多，不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave。当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseo...
    jquery-div中如果有a标签,会重复触发div的mouseover事件 ,求解决答：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave 希望对你有用
    大家正在搜