<!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. 【HDOJ2767】【Tarjan缩点】

    http://acm.hdu.edu.cn/showproblem.php?pid=2767 Proving Equivalences Time Limit: 4000/2000 MS (Java/O ...

  2. 《DSP using MATLAB》Problem 6.24

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  3. 【liunx】时间处理函数

    一.脚本示例 [mylinuxaccount@linux01 ~]$ date +%Y%m%d 20171224 [mylinuxaccount@linux01 ~]$ date +%F 2017-1 ...

  4. maven(一)

    Maven的简介 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 Maven好处 普通的传统项目 maven项目 分析:maven项目为什么这么小? ...

  5. MySQL--查看数据库连接信息

    ===================================== 查看当前连接到数据库的用户和Host ## 查看当前连接到数据库的用户和Host ## SELECT DISTINCT US ...

  6. IDEA基本設置

    2.界面字体大小设置 File菜单->Settings->Appearance->Override default fonts by(not recommended):Name:宋体 ...

  7. getModifiers 方法解释。

    modifier: 字面意思修饰符. getModifiers  得到的就是 前面的 的修饰符 ,这个方法 字段和方法 都有.这个方法的值是 修饰符 相加的到的值. 例子: public class ...

  8. 全文检索Solr集成HanLP中文分词

    以前发布过HanLP的Lucene插件,后来很多人跟我说其实Solr更流行(反正我是觉得既然Solr是Lucene的子项目,那么稍微改改配置就能支持Solr),于是就抽空做了个Solr插件出来,开源在 ...

  9. C/C++中带可变参数的函数

    1.带可变参数的函数由来 当函数中的参数个数不确定时,这时候就需要带可变参数的函数! 如我们经常使用的C库函数printf()实际就是一个可变参数的函数, 其原型为: int printf( cons ...

  10. MVC4.0，并完美结合Razor引擎

    本文主要解决“当前上下文不存在ViewBag”的问题, 在View视图实际使用过程中,如果引用不正确会提示“当前上下文不存在ViewBag”,首先需要引入“Microsoft.CSharp”类库 然后 ...