事件冒泡,即事件开始由具体的元素接受,然后逐级向上传播。
简单点就是说给一个子元素一个onclick事件,当该元素被点击时,body也会被触发onclick事件。
2种处理方法,第一种:将事件定义为取消冒泡事件.第二种:将子元素的事件函数里返回false即可。
第一种:
而[b]even.bubbles[/b] 表明事件是否冒泡。
[b]even.cancelable[/b] 表明是否可以取消事件的默认行为。
第二种:将该子元素的点击事件返回[b]false[/b]即可。
简单点就是说给一个子元素一个onclick事件,当该元素被点击时,body也会被触发onclick事件。
2种处理方法,第一种:将事件定义为取消冒泡事件.第二种:将子元素的事件函数里返回false即可。
第一种:
而[b]even.bubbles[/b] 表明事件是否冒泡。
[b]even.cancelable[/b] 表明是否可以取消事件的默认行为。
<script type="text/javascript">
document.getElementById("bt").onclick = function(){
document.getElementById("box").style.display = "block";
}
document.getElementById("box").onclick = function(e){
e = e || window.event;
if(window.event){ //阻止事件冒泡
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
document.body.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
if(target.id === "box" || target.id === "bt") {
return;
} else {
document.getElementById("box").style.display = "none";
}
}
</script>
第二种:将该子元素的点击事件返回[b]false[/b]即可。
document.getElementById("bt").onclick = function(){
document.getElementById("box").style.display = "block";
return false;
}