javascript里阻止事件冒泡
如下图所示，灰色块包含红色块，假设我们为灰色和红色块各绑定一个单击弹框事件，当我们点击红色块时，不希望触发灰色块的弹框事件，这就需要阻止冒泡事件了。
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里阻止事件冒泡的更多相关文章
- javascript如何阻止事件冒泡和默认行为
阻止冒泡: 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- JAVAscript——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
- JavaScript阻止事件冒泡（兼容IE、Chrome、FF）
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript - 事件详解（阻止事件冒泡+阻止事件行为）
一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
随机推荐
- K/3 Cloud开发之旅－－环境准备篇
K/3 Cloud是金蝶软件新推出的一款产品,介绍我就不多说了,谁用谁知道啊,那么我们如果要基于它做开发需要什么环境呢 开发环境必备软件 1 操作系统Windows X86/X64 或者Windows ...
- paip.语义分析--分词--常见的单音节字词 2_deDuli 单字词 774个
paip.语义分析--分词--常见的单音节字词 2_deDuli 单字词 774个 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址 ...
- 深入浅出UML类图（一）
在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...
- virtualbox下面安装ubuntu后外网如何远程ssh访问
这两天在折腾virtualbox安装linux的事情,想多弄几个节点,装hadoop, 环境如下 两台thinkpad, 一台正常上班用的,win7 一台装的ubuntu kylin 16.04, 上 ...
- bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)
bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8) Q: hubery@roaster:~$ locale loc ...
- css study
---恢复内容开始--- html{filter:expression(document.execCommand("BackgroundImageCache",false,true ...
- Python socket (单线程)
client, 客户端 code : 客户端主要方法, s.send(); s.sendall(); s.recv(); s.connect() class Client(object): def _ ...
- Thread and ThreadPool
C#中Thread与ThreadPool的比较 Thread类,一次使用一个线程,来创建和删除线程.这种方式建立和删除线程是很昂贵的(cpu密集型). Threadpool类 对于大多数的情况下是使用 ...
- bfc+css
CSS BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素 ...
- cocos2d-x项目实现android视频播放参考链接
http://blog.csdn.net/xiaominghimi/article/details/6870259 http://blog.csdn.net/kaitiren/article/deta ...