<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery.js"></script>
</head>

<body>
<div style="height:300px;">
    <p>段落文本内容
        <input type="button" value="点击" />
    </p>
</div>
</body>

<script type="text/javascript">

// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-click");
} );

//为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
    event.stopPropagation();
} );

//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click    
} );

</script>
</html>

stopPropagation()阻止事件的冒泡传递的更多相关文章

  1. stopPropagation()阻止事件向父容器传递

    topPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数 ...

  2. JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

  3. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

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

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

  5. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

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

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

  7. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

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

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

  9. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

随机推荐

  1. java-源文件中可以有多个类，但是最多只能有一个public修饰

    1.如果源文件中有多个类,那么只能有一个类是public类:如果有一个类是public类,那么源文件的名字必须与这个类的名字完全相同,扩展名是.java. 2.如果源文件中没有public类,那么源文 ...

  2. hdu4338 Simple Path

    Everybody knows that totalfrank has absolutely no sense of direction. Getting lost in the university ...

  3. Liunx----vi编辑器

    关于vi编辑器基本的用法总结如下: vi是linux下的一款文编编辑器. 进入vi的方法:在系统启动起来后,直接键入vi或vi 文件名: 进去后输入内容方法:输入a或i,切换到编辑模式: 退出编辑模式 ...

  4. 【java编程】java中什么是bridge method（桥接方法）

    https://blog.csdn.net/mhmyqn/article/details/47342577 https://www.cnblogs.com/strinkbug/p/5019453.ht ...

  5. CSVN（SVN）命令入门及使用过程中遇到的错误问题汇总

    首先进入web管理界面新建一个版本库 新建一个文件text svn add text #如果提示错误,在后面增加–force svn ci -m 'add text' #如果提示错误,将csvn下的目 ...

  6. Eclipse工具的设置

    1 Eclipse的工作空间和新建工程1.1: 工作空间* 其实就是我们写的源代码所在的目录 1.2: 创建工程(项目)* 右键/Package Explore 空白区/new /Java Proje ...

  7. OutputStream 和 Writer

    OutputStream类(直接操作byte数组) 该类是字节输出流的抽象类,定义了输出流的各种操作方法.如下图是OutputStream的层次结构: ByteArrayOutputStream:字节 ...

  8. supervisorctl 常用命令

    命令官方文档:http://supervisord.org/running.html#running-supervisorctl supervisorctl 常用命令: supervisorctl 常 ...

  9. PageBaseType属性的功用

    在web.config中经常能看到如下类似语句:<pages theme="Default"   pageBaseType="VS.Facade.PageBase, ...

  10. Spring Cloud(Dalston.SR5)--Hystrix 断路器-合并请求

    在 Spring Cloud 中可以使用注解的方式来支持 Hystrix 的合并请求,缓存与合并请求功能需要先初始化请求上下文才能实现,因此,必须实现 javax.servlet.Filter 用于创 ...