zoukankan      html  css  js  c++  java

  • 阻止子元素继承父元素事件

    DOM事件标准定义了两种事件流，分别是捕获和冒泡。默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。

    冒泡事件流

        当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

    捕获事件流

        事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

    传统的事件冒泡

        传统的阻止子元素继承父元素的事件方法是：为子元素添加父元素的相同事件，然后在子元素事件中阻止事件冒泡。例如：在父元素中添加onclick事件，如果不阻止冒泡的话，点击子元素也会响应父元素事件。而在子元素中阻止冒泡的话，则子元素不响应父元素事件。

    [javascript] view plain copy
     
     print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Insert title here</title>  
    6. <script type="text/javascript" src="jquery.min.js"></script>  
    7. <script type="text/javascript">  
    8.     function test1(){  
    9.         $("#child").click(function(e){  
    10.             e.stopPropagation();  
    11.         });   
    12.         alert("测试1");  
    13.     }  
    14. </script>  
    15. </head>  
    16. <body>  
    17.     <div id="parent" onclick="test1(this);"  style="border:1px solid black;250px">  
    18.         <input type="text" value="123" id="child">  
    19.     </div>  
    20. </body>  
    21. </html>  


    特殊的事件冒泡

        对于onmouseover和onmouseout事件，不能使用e.stopPropagation()或e.cancelBubble=true来阻止事件冒泡。虽然onmouseleave和onmouseenter事件可以替代onmouseover和onmouseout事件，因为这两个事件是不会冒泡的。但是这两个事件只支持IE浏览器。jQuery中有mouseleave事件个mouseenter事件，可以用bind绑定它们即可解决浏览器冲突。

        纯js的操作则需如下方式：

    [javascript] view plain copy
     
     print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Insert title here</title>  
    6. <script type="text/javascript" src="jquery.min.js"></script>  
    7. <script type="text/javascript">  
    8.     function isLeaveOrEnter(e,obj){  
    9.         if(e.type != "mouseover" && e.type != "mouseout"){  
    10.             return false;  
    11.         }  
    12.         var relag= relag?e.relatedTarget:(e.type=="mouseover")?e.toElement:e.formElement;  
    13.         if(relag && relag == obj){  
    14.             if(e.type == "mouseover"){    
    15.                 $("#child").val("这是一次测试");  
    16.             }else{  
    17.                 $("#child").val("");  
    18.             }  
    19.         }     
    20.     }  
    21. </script>  
    22. </head>  
    23. <body>  
    24.     <div id="parent" onmouseover="isLeaveOrEnter(event,this);" onmouseout="isLeaveOrEnter(event,this);" style="border:1px solid black;250px">  
    25.         <input type="text" value="123" id="child">  
    26.     </div>  
    27. </body>  
    28. </html>  

    操作原理：

    获取事件作用的对象元素，判断该对象是不是绑定的对象元素，如果是则进行操作，不是则不操作。这里的示例是当鼠标移入div时input框的值为“这是一次测试”，移除div时清空值，而鼠标移入input框时则不做操作。

    return false也能阻止事件冒泡，但是它不仅阻止了事件冒泡也阻止了事件本身，相当于阻塞了该事件，不再执行。而e.stopPropagation()只是阻止事件冒泡。

    默认操作

    事件操作可以使用阻止冒泡，而链接跳转等操作则需要阻止默认操作才行，这时需要用到event.preventDefault或window.event.returnValue=false。

    重拾梦想 改写人生
  • 相关阅读:
    实现只有0,1,2三种元素的乱序数组的排序
    请说明Request和Session的生命周期
    使用Enumeration和Iterator遍历集合类
    hive中分组取前N个值的实现
    世界知名网站的技术实现(转)
    蚂蚁变大象：浅谈常规网站是如何从小变大的(转)
    Hadoop管理员的十个最佳实践(转)
    internet笔记
    Instagram 架构分析笔记(转)
    Apache Pig入门 –介绍/基本架构/与Hive对比(转)
  • 原文地址：https://www.cnblogs.com/wulibo/p/7347571.html
Copyright © 2011-2022 走看看