当前位置: 编程技术>.net/c#/asp.net
关于javascript冒泡与默认事件的使用详解
来源: 互联网 发布时间:2014-10-20
本文导语: 对于javascript的冒泡,我一直误解它了, 冒泡,即是从底层往外blow blow blow ... 惭愧的是,我一直以为阻止冒泡是阻止父元素往子元素传递事件…… 贴上一串代码以便往后回顾! 代码如下: window.onload=function(){ var a=document.getEleme...
对于javascript的冒泡,我一直误解它了,
冒泡,即是从底层往外blow blow blow ...
惭愧的是,我一直以为阻止冒泡是阻止父元素往子元素传递事件……
贴上一串代码以便往后回顾!
代码如下:
window.onload=function(){
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c");
var c=document.getElementById("d");
a.onclick=function(e){
this.style.background="#000";
};
b.onclick=function(e){
this.style.background="#ccc";
//阻止事件冒泡
window.event.cancelBubble = true;//IE8以下
e.stopPropagation();
};
d.onmousedown=function(e){
//阻止默认事件,比如在chrome下图片有拖拽默认行为
window.event.returnValue = false;
e.preventDefault();
}
}
代码如下:
Html部分
另一个例子:
代码如下:
window.onload=function(){
document.getElementById("test").addEventListener('click',function(e){
alert('aaaa')
},false);
document.getElementById("test1").addEventListener('click',function(e){
alert('bbb')
e.stopPropagation();
},false)
}
代码如下:
#test1{width:100px;height:100px;background:#ff0}
#test2{width:100px;height:100px;background:#ff0}