我们经常会遇到点击两个或者多个重叠的层事件的时候，往往点击最里的的一层会接连触发外面的点击事件。这时候就需要用到stopPropagation事件即阻止冒泡事件
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').bind('click',function(e){
e.stopPropagation()
alert('input')
})
$('div').bind('click',function(e){
e.stopPropagation();
alert('div')
})
$(document).bind('click',function(){
alert('document')
})
})
</script>
</head>
<body>
<div style="width:200px;height:200px;background:green;">
<input type="button" value="按钮">
</div>
</body>
<html>

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

  1. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  2. jquery 阻止冒泡事件和阻止默认事件

    jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  4. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...

  5. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

  6. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  7. js 阻止冒泡事件和默认事件

    阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...

  8. js常用阻止冒泡事件

    原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...

  9. 页面内部DIV让点击外部DIV 事件不发生（阻止冒泡事件）

    如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...

随机推荐

  1. iOS地图----MapKit框架

    1.MapKit框架使用前提 ①导入框架 ②导入主头文件 #import <MapKit/MapKit.h> ③MapKit框架使用须知 MapKit框架中所有数据类型的前缀都是MK Ma ...

  2. 解决重置PostgreSQL 9.6密码的问题

    一.PostgreSql9.6重置密码的方法: 1.打开windows服务管理器,找到“postgresql-x64-9.6”服务,停止服务. 2.找到PostgreSQL9.6的安装目录(以我的E盘 ...

  3. Vue 路由知识二(工程模式下路由的配置)

    vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的:npm/cnpm install vue-router --save-dev. 在路由的核心文件:src/router ...

  4. fedora下yum安装gnome和kde桌面 (有问题 )

    转自:   http://linux.chinaunix.net/techdoc/system/2009/08/31/1133198.shtml 1.1  安装KDE桌面环境 yum groupins ...

  5. formSelects-v4.js 基于Layui的多选解决方案

    https://hnzzmsf.github.io/example/example_v4.html

  6. JAVA编程不得不看的几本经典书籍

    为了帮助对java编程感兴趣的同学更好.更快的提高编程技术,武汉北大青鸟光谷校区专业老师在此推荐几本学习编程非常有用的书籍,以供大家参考. 入门类 1.<java从入门到精通>(第3版) ...

  7. ubuntu12.04 配置apache+modwsgi+django1.5

    1.首先下载modwsgi  链接如下: http://files.cnblogs.com/baoyiluo/mod_wsgi-3.4.zip 2.解压并安装mod_wsgi: ./configure ...

  8. Hadoop环境搭建、启动和管理界面查看

    一.hadoop环境搭建: 1. hadoop 6个核心配置文件的作用:core-site.xml:核心配置文件,主要定义了我们文件访问的格式 hdfs://hadoop-env.sh:主要配置我们的 ...

  9. vlmcsd-1111-2017-06-17

    Source and binaries: http://rgho.st/6c6R7RwMZ   全部编译好了 https://www.upload.ee/files/7131474/vlmcsd-11 ...

  10. [转载]在网页中插入media，RealPlayer等控件

    [转载]在网页中插入media,RealPlayer等控件 (2012-11-02 20:27:43) 转载▼ 标签: 转载   原文地址:在网页中插入media,RealPlayer等控件作者:Mo ...