我们经常会遇到点击两个或者多个重叠的层事件的时候，往往点击最里的的一层会接连触发外面的点击事件。这时候就需要用到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. MyEclipse开启Jquery智能提示

    myeclipse 增加javascript提示和jquery提示等不用安装插件自带功能 (对着需要提示的项目右键,点击properties) 不行的话就得安装插件: http://www.spket ...

  2. 从java toBinaryString() 看计算机数值存储方式（原码、反码、补码）

    一.toBinaryString 方法及其含义 1.1 方法说明 该方法位于java.lang.Integer类中 方法签名:public static String toBinaryString(i ...

  3. HttpWebRequest 以及WebRequest的使用

    1.WebRequest的发送数据以及接收数据 class Program { static void Main(string[] args) { //创建一个实例并发送请求 HttpWebReque ...

  4. Android一句代码给Activity定制标题栏

    在此之前,使用过几种方法设置标题栏: 1.常规法:这个方法是最常用的了,哪个activity需要什么样的标题栏,就在对应的xml布局设计.缺点:此方法维护起来困难,没有将标题栏的共性抽取出来, 如果要 ...

  5. Compiler 1.6.5 —1.6.7

    Compiler  1.6.5 —1.6.7 Dynamic Scope Technically, any scoping policy is dynamic if it is based on fa ...

  6. js基础盲点

    var myarray= new Array(8); //创建数组,存储8个数据. 注意:1.创建的新数组是空数组,没有值,如输出,则显示undefined.2.虽然创建数组时,指定了长度,但实际上数 ...

  7. 番茄花园Ghost Win10系统X64位10041装机版2015年4月

    转载:系统妈,系统下载地址:http://www.xitongma.com/windows10/2015-04-01/6639.html 番茄花园Ghost Win10系统X64位10041装机版20 ...

  8. java 文件另存为

    FileUtils.copyFile(new File(), new File());

  9. jQuery 价格显示 前面位数与后面两位显示不同样式（一大一小）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. jQuery 收缩展开效果

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...