如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了。

IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

我们看代码实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象--阻止事件冒泡</title>
</head>
<body>
<div id="gray" style="background:#ddd;width:400px;height:400px;">
<div id="red" style="background:#FF0000;width:200px;height:200px;"></div>
</div> <script>
var oGray=document.getElementById("gray");
var oRed=document.getElementById("red"); oGray.onclick=function(){
alert("点击了灰色块!");
} oRed.onclick=function(e){
alert("点击了红色块!"); var event=e||window.event;
//阻止冒泡事件,否则会触法oGray.onclick方法
if(document.all){
//IE
event.cancelBubble=true;//如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true
}else{
//FF,Chrome
event.stopPropagation();//不再派发事件
}
} </script>
</body>
</html>

javascript里阻止事件冒泡的更多相关文章

  1. javascript如何阻止事件冒泡和默认行为

    阻止冒泡:    冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo ...

  2. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  3. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  4. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  5. JAVAscript——菜单下拉列表练习(阻止事件冒泡)

    下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...

  6. JavaScript阻止事件冒泡(兼容IE、Chrome、FF)

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  7. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

  8. javascript - 事件详解(阻止事件冒泡+阻止事件行为)

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  9. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

随机推荐

  1. Win7 64位 MinGW环境测试SDL2.0.3

    下载MinGW版的文件 http://www.libsdl.org/release/SDL2-devel-2.0.3-mingw.tar.gz 解压放到mysys下面 运行Makefile mysys ...

  2. 安卓稳定性压测工具_monkey环境搭建(简易)

    1.准备工具: sdk(64位操作系统):http://pan.baidu.com/s/1kV33pll sdk(32位操作系统):http://pan.baidu.com/s/1gfnww87 2. ...

  3. java时区问题的一个坑

    事情是这样的,前台传过去一个日期字符串,就像2016/12/15 00:00,2016/12/15 23:59类似的格式,但每次从日志平台查日志查询的时间范围都不对,而是提前了一天. 原因是在java ...

  4. UVALive 2191 Potentiometers (树状数组)

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  5. java.lang.OutOfMemoryError: Java heap space解决方法

    引起java.lang.OutOfMemoryError: Java heap space异常,可能是由JAVA的堆栈设置太小的原因 根据网上的答案大致有以下两种解决方法: 1.在D:/apache- ...

  6. linux服务器分析优化

    转:http://jiekeyang.blog.51cto.com/11144634/1774473 一.系统性能分析 1.系统的性能是指操作系统完成任务的有效性.稳定性和响应速度.操作系统完成任务与 ...

  7. [转] How to import a large data set using XPO efficiently within a transaction

    https://www.devexpress.com/Support/Center/Example/Details/T333879

  8. proxyd.c

    /**************************************************************************** * program: proxyd * mo ...

  9. Python-变量

    1.Python的变量是什么 变量是用来存储计算机程序中的信息,唯一的目的是将数据存储在内存中. 2.Python变量的组成 变量由字母.数字.下划线组成: 变量的第一位不能是数字,可以是字母或下划线 ...

  10. 读bootstrap2.3.2有感2

    排版: Bootstrap定义的全局 font-size 是 14px,line-height 是 20px.这些样式应用到了 <body> 和所有的段落上.另外,对 <p> ...