JS事件冒泡的影响及处理

假设，有两个盒子，其中小的盒子被盒子包在里面：

<div class="father">
    <div class="child"></div>
</div>

分别给两个盒子绑定一个点击事件：

const father = document.querySelector('.father')
const child = document.querySelector('.child')

father.addEventListener('click', function () {
    console.log('father')
})

child.addEventListener('click', function () {
    console.log('child')
})

此刻，点击蓝色盒子（father），查看控制台输出，并没问题

再点击紫色盒子（child），查看控制台输出，发现居然打印了两个值。

仔细观察可以发现，先是打印child之后才打印father，可以看出这是事件冒泡所引起的。与是，我们可以得出解决办法，就是阻止child点击事件冒泡：

child.addEventListener('click', function (e) {
    e.stopPropagation()
    console.log('child')
})

再次点击紫色盒子（child），输出正常。

相关资料：事件冒泡及捕获