事件冒泡
当事件发生后,这个事件就要开始传播(从里到外直到window或者从外向里)。事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。
注意 ==这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,即使事件确实传递了,也不会做出表现。==
<html>
<head>
<style type="text/css">
div.one
{
border-style: solid;
border-color: #0000ff
}
div.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
</style>
</head>
<body>
<div class="one" id="div1">
<div class="two" id="div2" href="http://www.baidu.com">
儿子儿子儿子
</div>
父亲父亲父亲
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert("这是儿子事件");};
div1.onclick = function(){alert("这是父亲事件");};
</script>
</body>
</html>
上面例子是非常典型的冒泡事件表现,点击div2,事件也将传递给div1(div2的父节点)。
显然这个特性有时也并不是我们所需要的,所以有对应的阻止冒泡的方法。
事件有个stopPropagation方法,只要调用该方法,事件将停止冒泡。在上例中给div2响应函数里调用可实现阻止。
div2.onclick = function(ev){
alert("这是儿子事件");
if ( e && e.stopPropagation )
e.stopPropagation();
else //IE取消事件冒泡的特殊处理
window.event.cancelBubble = true;
};
注意 IE浏览器较为特殊,调用cancelBubble = true来实现。
总结
https://www.cnblogs.com/julin-peng/p/3991522.html
1. event.stopPropagation()
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)
2. return false
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
3. event.preventDefault()
事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
网友评论