美文网首页
事件冒泡、阻止事件冒泡

事件冒泡、阻止事件冒泡

作者: xiao_xie_shen | 来源:发表于2019-03-07 10:23 被阅读0次

事件冒泡

当事件发生后,这个事件就要开始传播(从里到外直到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()

事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

相关文章

网友评论

      本文标题:事件冒泡、阻止事件冒泡

      本文链接:https://www.haomeiwen.com/subject/xqwqpqtx.html