event.cancelBubble

有时候需要我们禁止事件冒泡

<html>

<head>

<style>

#div1{ width:100px;height:200px;border:1px solid red;display:none;}

</style>

window.οnlοad=function()

{

var oDiv=document.getElementById('div1');

var oBtn=document.getElementById('btn1');

oBtn.οnclick=function(ev)

{

//如果不禁止冒泡程序，oBtn.onclick点击事件会传送到document.onclick，并让document绑定的时间函数执行

ev=ev || event;

oDiv.style.display='block';

ev.cancelBubble=true;

}

document.οnclick=function()

{

oDiv.style.displa='none';

}

</script>

</head>

<body>

</body>

</html>

event.cancelBubble相关推荐

event.stopPropagation/event.preventDefault()/event.cancelBubble等Event属性含义
Event 接口表示在 DOM 中出现的事件. event.bubbles: 返回一个布尔值,表明当前事件是否会向DOM树上层元素冒泡. event.cancelable: 只读属性 cancelab ...
event.cancelBubble的理解
Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你 ...
关于event.cancelBubble和event.stopPropagation（）的困惑
首先我在网上看到不少文章大体上分为两个(不正确)观点: 1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器 ...
event.cancelBubble=true e.stopPropagation() 取消事件处理，阻止事件
<tr><a href="xxx">连接</a></tr> 如上结构,单击tr的时候跳转至另一页 <tr style=&quo ...
event.cancelBubble=true 取消事件处理
<tr><a href="xxx">连接</a></tr> 如上结构,单击tr的时候跳转至另一页面 <tr style=&qu ...
关于event.cancelBubble
http://www.cnblogs.com/quanhai/archive/2010/04/15/1712277.html 由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个T ...
event.cancelBubble与event.stopPropagation()
在火狐Firefox.opera.IE下阻止冒泡事件是不同的代码的,火狐下使用的是event.stopPropagation(),而IE下使用的是cancelBubble,jQuery 可以使用e.s ...
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
11.①事件冒泡：取消冒泡event.cancelBubble=true或.sopImmediatePropagation()②事件绑定addEventListener(参数1，参2，参3）③事件传播
目录一:事件冒泡: 1.冒泡指的是事件的向上传导, 2.冒泡与子元素所在位置无关,与结构有关(就算给子元素添加定位,移出父元素里面,还是会产生冒泡) 3.要取消事件的冒泡需要用到事件对象(两种方法) ...

event.cancelBubble

event.cancelBubble相关推荐

最新文章

热门文章