<!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. Django book manage system

    创建一个简易的可以增删改查book的书籍管理system urls.py from django.contrib import admin from django.urls import re_pat ...

  2. CentOS7安装PostgreSQL10,pgadmin4

    ======PostgreSQL10 CentOS7=================FYI:https://tecadmin.net/install-postgresql-server-centos ...

  3. poj 2155 B - Matrix 二维树状数组

    #include<iostream> #include<string> #include<string.h> #include<cstdio> usin ...

  4. 将本地项目上传到git/码云

    idea查看任意项目的远程仓库地址: git remote -v git branch -v git branch -d  分支名          删除本地分支 git branch -D  分支名 ...

  5. Easyui combobox下拉框默认选中第一项

    var val = $(#cc).combobox("getData");for (var item in val[0]) {       if (item == "gr ...

  6. Python中msgpack库的使用

    msgpack用起来像json,但是却比json快,并且序列化以后的数据长度更小,言外之意,使用msgpack不仅序列化和反序列化的速度快,数据传输量也比json格式小,msgpack同样支持多种语言 ...

  7. Centos7禁止或者允许开机启动服务

    [root@bogon rsyslog.d]# systemctl is-enabled httpd disabled [root@bogon rsyslog.d]# systemctl status ...

  8. linux配置防火墙

    centos6.5 防火墙开放80端口 iptables -I INPUT -p tcp –dport 80 -j ACCEPT //注意,dport前面是两个-,其中-I是指在防火墙INPUT表最前 ...

  9. Singer 学习四 可视化数据操作工具

    knots 是一款基于electron 开发的可视化UI界面,我们可以此工具进行方便的数据处理,注意工具使用了 docker 运行,需要安装docker 下载地址   https://github.c ...

  10. 使用netlify-statuskit 进行系统业务状态报告

    netlify-statuskit 是netlify 团队开源的一款类似github status 的脚手架website,使用此工具 我们可以对于我们系统模块进行报告,同时对于故障时,我们可以进行故 ...