zoukankan      html  css  js  c++  java
  • jQuery时间冒泡

    事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。

    阻止JavaScript事件冒泡传递的方法:

    1.event.stopPropagation();

     $(document).ready(function(){
         $('div').click(function(event){
            alert('div');
         });
         $('p').click(function(event){
            alert('p');
         });
         $('span').click(function(event){
            alert('span');
            event.stopPropagation();
         })
     });

    <div>Div Element
      <p>Paragraph Element<br/>
        <span>Span Element</span>
      </p>
    </div>

     

    2.return(false);

    $(document).ready(function(){
        $('div').click(function(event){
            alert('div');
        });
        $('p').click(function(event){
            alert('p');
        });
        $('span').click(function(event){
            alert('span');
            return(false);
        })
    });
    
    <div>Div Element
        <p>Paragraph Element<br/>
            <span>Span Element</span>
        </p>
    </div>

    区别:return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

    程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

    ele.addEventListener('click',doSomething2,true)

    true=捕获

    false=冒泡

  • 相关阅读:
    ASP.NET MVC5 生成验证码
    System.Web.Caching.Cache类 Asp.Net缓存 各种缓存依赖
    ASP.NET访问网络驱动器(映射磁盘)
    ASP.NET Cache 实现依赖Oracle的缓存策略
    目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto
    ASP.NET 5 改名 ASP.NET Core 1.0
    C# 7.0新加特性
    elasticsearch 单实例安装启动
    关于mybatis 一级缓存引发的问题
    关于springboot 打包问题 jar包和 war包
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4813844.html
Copyright © 2011-2022 走看看