<!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. Fedora瘦身

    启用的服务 systemctl list-unit-files --type=service | grep enabled 所有服务 systemctl list-unit-files --type= ...

  2. [Educational Codeforces Round 55 (Rated for Div. 2)][C. Multi-Subject Competition]

    https://codeforc.es/contest/1082/problem/C 题目大意:有m个类型,n个人,每个人有一个所属类型k和一个能力v,要求所选的类型的人个数相等并且使v总和最大(n, ...

  3. java transient 知识点学习

    今天看源码的时候看到这个关键字,完全没见过,不懂.好吧!学习一下. 我们都知道实现了Serilizable接口的类,便可以序列化,那么其中某些成员变量不想被序列化怎么办?就是利用transient这个 ...

  4. List接口的使用方法

    ★List接口特点: 1.元素存储有序的集合 2.带索引的集合 3.集合中可以有重复的元素 4.常用的子类有ArrayList ,  LinkedList ★List接口的方法:add   , rem ...

  5. HTTP请求属性说明

    1)URL:页面地址. 2)Method :页面的提交方式,POST或GET. 3)EncType:编码类型.此参数给出一个内容类型(Content-Type),指定其做为回放脚本时“Content- ...

  6. mysql之 sysbench1.0.3 安装与系统压力测试

    针对系统和数据库压测是项目上线前必做的一项,这里使用的是最新版本的sysbench做的压测使用详解.sysbench可以做系统层面的压力测试(CPU.内存.硬盘IO.互斥锁.Thead),也可以做数据 ...

  7. 浏览器多进程架构、浏览器内核多线程、js单线程、GUI 渲染线程 与 JavaScript引擎线程互斥 原理

    浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程). 出处:http://www.imweb.io/topic/58e3bfa845e5c1346 ...

  8. 十一、springboot（六）整合Thymeleaf

    1.添加jar包依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  9. MySQL 5.7 修改root密码

    更新 MySQL 5.7 以后通过以下方法无法在修改root密码: ') where user='root'; 查看下MySQL的官方文档发现版本更新后原来user里的password字段已经变更为a ...

  10. 一道Linux 面试题

    一个文本文件info.txt的内容如下:aa,201zz,502bb,1ee,42每行都是按照逗号分隔,其中第二列都是数字,请对该文件按照第二列数字从大到小排列 答案:cat info.txt|awk ...