如何阻止子元素触发父元素的事件

今天我做了一实验,想要实现当一个div嵌套另外一个div的时候,点击外层div的时候触发事件,而点击内层div的时候不进行事件触发,代码如下:


原本我想着只给容器ct添加一个事件而不给其内的子元素添加事件,就能实现我的效果,结果后来意识到内层的div也属于容器ct的一部分,这样做无论点击容器部分还是内层div都会触发效果:


然后我心想如果能把外层ct容器和内层的div分辨出来不就可以了吗,然后接产生了解决方案一:

解决方案一:获取事件触发的实际目标(target)

  1. 我给事件处理函数添加了事件参数e,获取到了e.target,然后对e.target的特征(class)进行了判断,判断如果是内层div就不进行事件触发,确实达到了我想要的效果,代码如下:


  2. 后来发现并没有解决实际的问题,假如有很多个内层div,并且每一个div的class都是不一样的,或者内层div里面又有嵌套元素的话这个方法就不生效了:


于是我又想到前两天学习了一下关于DOM事件传播的机制,在DOM2级事件流中包含事件捕获和事件冒泡两个阶段,其中触发事件处理程序时,事件传播先是进入事件捕获阶段,事件由外层向内层具体元素传播,然后进入事件冒泡阶段,由内层具体元素再向外层进行传播,事件的处理默认是在冒泡阶段,如下图所示:


dom2级事件流

其中event对象中有一个方法是stopPropagation(),可以利用这个方法阻止事件的传播,然后我就想着能不能用用这个方法来阻止事件的捕获,在容器ct的点击处理程序上添加stopPropagation()addEventListener第三个参数设置为true,让事件处理发生在容器ct的捕获阶段,不向更具体的内层元素进行传播,结果发现我又踩坑了:原因是事件捕获是不能被阻止的,否则定位不到具体的元素;

那么只能采用阻止事件冒泡的方法来达成效果,于是出现了解决方案二:

解决方案二:阻止事件冒泡

首先理顺一下思路,因为我不想容器ct的子元素触发容器ct的事件,所以当我点击容器ct子元素时,事件进入捕获阶段,传播路径如下:

Document  →   html   →   body   →   div#ct   →   div.a   →   div.c

然后是冒泡并且执行处理方法的阶段:

div.c(触发ct事件)  →   div.a(触发ct事件)   →   div#ct(触发ct事件)   →   body   →   html   →   Document

理清了这个思路后问题就变得简单了,我们只要获取到了ct子元素div.a,然后给它单独添加stopPropagation()阻止事件冒泡,与此同时容器ct本身的事件触发不变动,就能达成效果,代码如下:

这样子就能彻底解决方案一所出现的问题了。

推荐阅读更多精彩内容