javascript核心技术（四十二）阻止浏览器的事件冒泡（不让子元素触发父元素的事件）

人亦已歌 · 发表于 2023-1-27 19:25:51

先说一下何为浏览器的事件冒泡。

默认状态下，如果父元素和子元素全都绑定了事件，当我们点击父元素内的子元素时，父元素上绑定的事件也会被触发。
本节要解决的问题就是：我们点击子元素后，不让父元素上绑定的事件执行。
所涉及的核心代码仅有一句

事件对象.stopPropagation();

复制代码

请看代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
<div id="div1" style="width:300px;height:300px;background-color:rgb(179, 226, 148);">
        <a id="teamczyx" href="https://www.teamczyx.com">慈众网络科技</a>
</div>
<script type="text/javascript">
        document.getElementById('teamczyx').onclick = function(e){
                //获取兼容性的事件对象
                var e = e || window.event;
                console.log('123');
                //阻止事件冒泡
                // e.stopPropagation();//标准浏览器
                //阻止默认行为
                // e.preventDefault();//标准浏览器
                //通用方式  阻止默认行为
                return false;

        }
        //给父元素绑定的点击事件
        document.getElementById('div1').onclick = function(e){
                console.log('父元素的点击事件执行了');
        }
</script>
</body>
</html>

此时，单击a链接时的执行结果如下：
javascript核心技术（四十二）阻止浏览器的事件冒泡（不让子元素触发父元素的事件）

我们现在将这句代码的注释取消掉，e.stopPropagation();，执行结果如下：

javascript核心技术（四十二）阻止浏览器的事件冒泡（不让子元素触发父元素的事件）

ok，到本节为止，关于事件、事件对象和节点操作就告一段落，从下节开始我们将进入下一个环节。

nmqliulei · 发表于 2023-2-20 18:44:18

严重支持！

lancao8 · 发表于 2023-3-4 07:11:09

在这之前.我还很盲目.不知道到底要学什么

阿平~~ · 发表于 2023-3-14 12:49:01

好文！此文让我少走四年弯路！！！

99536464 · 发表于 2023-3-24 03:23:22

唉、、人勒辈子啊！没有最好啊！只有更好啊！

english_gao · 发表于 2023-3-29 23:20:47

看来以前所做的努力都和这上面说的错太远了啊。我将来也得走程序员的路，我知道它很苦．至少现在刚开始接触程序的我就已经焦头烂额了，而自己还不知急，整天怨天尤人．读了这篇文章使我收益非浅．让我真正的认清自己．我想起了编程老师为让我们抓紧学习，给我们讲中国软件在世界的地位，美国可以占９０％，１０％是欧洲的，１３亿人口的中国却占不上位置．为什么会这样，我不敢评论，因为自己没资格．我们寝室的同学可能略见一斑，打游戏，每天必修，老师留了个万年历的分组完成程序，我们组十一在学校玩了７天，愣是一个也没有去做的，我自己电脑不能装ＶＣ那是借口，我知即使我装上了ＶＣ我也做不出来，我自己也是１天到晚的游戏啊！自己还想学好Ｃ，这样又怎么学好啊！没毅力，没韧性．坐享天成又怎么可能呢？谢谢您的教导让我如梦初醒！楼主的文章对我启发很大，我也是一个学计算机的本科生，谢谢楼主。