通常有两种事件流模型,一种是冒泡,一种是捕获。顾名思义,冒泡就是从内往外传播,捕获就是从外往里传播。

对于dom事件,就是这样的。比如,有两个父子div。

<div id="pdiv"  style="border: 1px solid red;width: 100px;height: 200px;">

    <div id="cdiv" style="border: 1px solid blue;width: 50px;height: 50px;">

    </div>

</div>

当点击cdiv块的时候,冒泡就意味着,从cdiv向pdiv传播,cdiv是在里边的元素。同理,捕获就是从pdiv向cdiv传播。现代流行的浏览器都支持冒泡,基本上推荐事件冒泡。

有了事件流,就带来了问题,如果cdiv和pdiv在页面加载时,都被赋予了点击事件,此时我点击cdiv的时候,我只希望执行cdiv的事件,而不想让它执行pdiv上的事件。

怎么办呢?此时,就需要阻止事件冒泡了。

比如:

 $(function(){

             $('#pdiv').click(function(e){
alert(this.id);
}); $('#cdiv').click(function(e){
alert(this.id);
e.stopPropagation();
}); });

如果注释掉第10行代码,点击cdiv的时候,就会先alert出cdiv,然后冒泡到pdiv。

在cdiv上进行阻止冒泡e.stopPropagation(),这样就只会alert出cdiv。

这个方法是阻止事件的传播,包括冒泡和捕获。通常在事件冒泡用即可。特殊情况再用在捕获。

dom阻止事件冒泡的更多相关文章

  1. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  2. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  3. JQuery阻止事件冒泡---阻止后续代码执行

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  4. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  5. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  6. vue2.0阻止事件冒泡

    <!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...

  7. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  8. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  9. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

随机推荐

  1. Java 接口和抽象类区别(写的很好,转了)

    原文:http://blog.csdn.net/sunboard/article/details/3831823 1.概述 一个软件设计的好坏,我想很大程度上取决于它的整体架构,而这个整体架构其实就是 ...

  2. Android HandlerThread和IntentService

    HandlerThreadHandlerThread继承了Thread,它是一种可以使用Handler的Thread,它实现也很简单,就是在run中通过Looper.prepare()来创建消息队列, ...

  3. 7.打开文件、文件读写操作、with方式、文件常用函数

    打开文件: 在python3中,打开文件的函数是: open(file, mode='r', buffering=None, encoding=None, errors=None, newline=N ...

  4. .NET(C#)使用Serialize、Deserialize序列和反序列化XML文档

    本文给大家分享一下C#操作(读取.写入)XML文档的实用方法,即用.NET本身提供的Deserialize和Serialize进行反序列化和序列化XML文档.这种方法主要是对比较规范的XML文档进行操 ...

  5. 控制台输出 mybatis 中的sql语句

    控制台输出 mybatis 中的sql语句 在 log4j.xml 文件中 增加如下配置 <!-- mybatis 输出的sql,DEBUG级别 --> <logger name=& ...

  6. FTP 服务搭建后不能访问问题解决

    主要是需要启动身份验证功能

  7. sha256sum和 md5sum 命令之间的区别

    Short answer: For verifying ISOs, there is no practical difference, use whichever you want, as long ...

  8. NFS 系统的搭建

    问题: 由于工作,需要,不断得进行挂在硬盘重装系统,NFS 系统给了我一个很好的解决方案.于是决定写一篇博客,防止以后再次使用的时候,能够很快得重新建立NFS 文件系统. 调研: NFS(Networ ...

  9. 解决web网站被挂马清除方法

    案例:某公司一个lamp的服务器网站站点目录下所有文件均被植入了广告脚本如下内容: <script language=javascriptsrc=http://%4%66E%78%72%67%2 ...

  10. 常用的 接口访问方法 post 和get

    public string GetFunction(string serviceAddress) { HttpWebRequest request = (HttpWebRequest)WebReque ...