zoukankan      html  css  js  c++  java
  • 阻止事件冒泡

    <div id="one" onclick="alert('我是最外层');"> 
            <div id="two" onclick="alert('我是中间层');">
                <a id="hr_three" href="http://www.baidu.com" onclick="alert('我是最里层');">点击我</a> 
            </div>
    </div>
    1.event.stopPropagation(); 
    事件处理过程中,阻止了事件冒泡,但不会阻止默认行为(它就执行了超链接的跳转) 
    2.return false; 
    事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 
    还有一种有冒泡有关的: 
    3.event.preventDefault(); 
    如果把它放在头部A标签的click事件中,点击“点击我”。 
    会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 
    它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
    
    4.this和event.target的区别:
    js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
    this和event.target的相同点:
    this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(e.target); 
    
    e.target与e.currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获、处于目标阶段和冒泡阶段。只有当他们同时处于目标阶段的时候他们的指向才是一样的。在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值
    参考博客:http://www.cnblogs.com/super-d2/archive/2012/06/11/2545180.html  http://zccst.iteye.com/blog/2081412
     
    5.js事件处理的兼容性函数:
    var EventUtil = {
      addHandler: function(element, type, handler){
        if (element.addEventListener){
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      removeHandler: function(element, type, handler){
        if (element.removeEventListener){
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      },
      getEvent: function(event){
        return event ? event : window.event;
      },
      getTarget: function(event){
        return event.target || event.srcElement;
      },
      preventDefault: function(event){
        if (event.preventDefault){
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },
      stopPropagation: function(event){
        if (event.stopPropagation){
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
    };
    
  • 相关阅读:
    20191224 Spring官方文档(Overview)
    20191224 Spring官方文档(启动)
    20191209 【归档】Linux就该这么学
    20191209 Linux就该这么学(6)
    20191209 Linux就该这么学(5)
    20191209 Linux就该这么学(4)
    20191209 Linux就该这么学(1-3)
    20191128 Spring Boot官方文档学习【目录】
    加密在卷积神经网络上的应用
    Federated Optimization: Distributed Machine Learning for On-Device Intelligence
  • 原文地址:https://www.cnblogs.com/gyx19930120/p/4419865.html
Copyright © 2011-2022 走看看