zoukankan      html  css  js  c++  java
  • 解决html中内部元素mouse事件干扰

    问题:onmouseover onmouseout事件在有内部元素的div上面使用的时候经常出现问题,移动到内部元素的瞬间会执行外部div的onmouseout事件 然后再执行内部元素和外部元素的      onmouseover事件

    解决办法:

      1.用hover方法代替onmouseover和onmouseout方法:hover([over,]out)鼠标进入对象执行【over】,鼠标移除执行【out】,方法内部判断了是否一致在对象上

        

    <script type="text/javascript">
        $(function(){
            $("#1").hover(
                    function(){
                        console.info($("#1").attr("id"));
                    },
                    function(){
                        console.info($("#1"));
                    }
                );
        })
        
    </script>
    </head>
    <body><!-- onmousemove="oo(this);" onmouseout="oo1(this);" -->
    <div  id="1">
        <table>
            <tr><td>12313</td><td>范德萨</td></tr>
            <tr><td>哈过分的话</td><td>黑钢飞刀</td></tr>
            <tr><td>均衡发展</td><td>均衡发展</td></tr>
        </table>
    </div>
    </body>

      2.因为干扰产生的主要原因是鼠标在移进内部元素的瞬间会激发外部元素的onmouseout事件,再先后激发内部元素和外部元素的onmouseover事件,所以可以让鼠标移出元素要执行    的方法在规定的一个很小(<1s)的时间内执行,再在onmouseover事件中clearTimeout(t)消除要执行的东东,这样就只执行了onmouseover事件,干扰效果也看不出来,例:

      

    <script type="text/javascript">
         var t;
       //鼠标移入执行
    function oo(btn){
         //清除移动到边界要执行的方法 clearTimeout(t); console.info($(btn).attr(
    "id")); }
       //移出执行
    function oo1(btn){
         //延后1ms执行 t
    = setTimeout(function(){ console.info($(btn)) },1); } </script> </head> <body> <div id="1" onmousemove="oo(this);" onmouseout="oo1(this);"> <tr><td>12313</td><td>范德萨</td></tr> <tr><td>哈过分的话</td><td>黑钢飞刀</td></tr> <tr><td>均衡发展</td><td>均衡发展</td></tr> </table> </div> </body>

      3.contains方法(没试过)

    在onmouseover时先进行如下判断,结果为true时再执行方法体:
    if(!this.contains(event.fromElement)){MouseOverFunc()}
    在onmouseout时先进行如下判断,结果为true时再执行方法体:
    if(!this.contains(event.toElement)){MouseOutFunc()}
    下面来解释一下上面两行代码的含义:
    在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。
    event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
    那么上面两行代码的含义就分别是:
    ○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;
    ○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;
    这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
    但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:
    if(typeof(HTMLElement) != "undefined")
    {
    HTMLElement.prototype.contains = function(obj) 
    {   
              while(obj != null &&  typeof(obj.tagName) != "undefind")   
              {
    if(obj == this)
    Return true;
    Obj = obj.parentNode;
    }    
    return false;   
    };   
    }

    引用博客:http://www.cnblogs.com/xiaoshatian/archive/2008/03/28/1127377.html

  • 相关阅读:
    iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解
    iOS开发~UI布局(一)初探Size Class
    OC登陆界面登陆按钮动画
    Git学习 --> 个人常用命令add,commit以及push
    Git使用之设置SSH Key
    【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)
    iOS网络检测Reachability 使用 Demo,可检测2、3、4G
    iOS提醒用户进入设置界面进行重新授权通知定位等功能
    iOS中 @synthesize 和 @dynamic 区别
    iOS 开发笔记
  • 原文地址:https://www.cnblogs.com/yongde/p/3056699.html
Copyright © 2011-2022 走看看