我们经常会遇到点击两个或者多个重叠的层事件的时候，往往点击最里的的一层会接连触发外面的点击事件。这时候就需要用到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. Vmware workstation12里如何正确快速安装可视化IDS系统Security Onion（图文详解）

    不多说,直接上干货! 首先,大家要明确: 问:安全洋葱能阻止入侵吗? 答:这一点,和OSSIM一样,不能阻止入侵. Security Onion基于Ubuntu,包含了入侵检测.网络安全监控.日志管理 ...

  2. redis的安装使用以及一些常用的命令

    Redis是一个key-value存储系统.并提供多种语言的API,我们可使用它构建高性能,可扩展的Web应用程序.目前越来越多的网站用它来当做缓存,减轻服务器的压力. 本文安装用的到redis是绿色 ...

  3. mybatis的mapper.xml文件细节

  4. vuetifyjs简介及其使用

    何为 vuetify 一个vue ui库,提供vue组件供使用.根据 Google Material Design 指南实现(https://material.io/).Vuetify支持SSR(服务 ...

  5. 30天自制操作系统 DAY6

    _load_gdtr: 这个函数用来将指定的段上限(limit)和地址赋值给名为GDTR的48位寄存器. 给GDTR赋值唯一的办法是指定一个内存地址,从指定的地址读取6个字节(48位),然后赋值给GD ...

  6. OJB

    OJB 编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 对象关系桥(OJB)是一种对象关系映射工具,它能够完成从Java对象到关系数据库的透明存储.   英文名 OJB ...

  7. Java泛型中的协变和逆变

    Java泛型中的协变和逆变 一般我们看Java泛型好像是不支持协变或逆变的,比如前面提到的List<Object>和List<String>之间是不可变的.但当我们在Java泛 ...

  8. 1434：【例题2】Best Cow Fences

    1434:[例题2]Best Cow Fences 时间限制: 1000 ms         内存限制: 65536 KB提交数: 263     通过数: 146 [题目描述] 给定一个长度为n的 ...

  9. JS_类数组

    [目录] 什么是数组 非类数组 类数组对象转化为数组 [类数组] 什么是类数组? 定义: 不具有数组的所具有的方法 拥有length属性,其属性(索引)为非负整数 类数组 var obj = { 0 ...

  10. rsync 同步多台服务器项目目录

    server1:192.168.10.1server2:192.168.10.2实现server2实时同步server1的数据! ###############server1############# ...