前端 - 在一个div里面还镶嵌有一个div，两个都有点击事件，两个点击事件不同，应该是怎么做？

Question

在一个div里面还镶嵌有一个div，两个都有点击事件，两个点击事件不同，应该是怎么做？
外层点击事件不能影响到内部的点击，这个处理应该叫做什么？

Answer 1

vue2用事件修饰符.self，就行，原生这样:

<div id="outerDiv">
  <div id="innerDiv">
    
  </div>
 
</div>

<script>
document.querySelector('#innerDiv').addEventListener('click', function(event) {
  event.stopPropagation();
  // 内部div的点击事件处理代码
});

document.querySelector('#outerDiv').addEventListener('click', function(event) {
  // 外部div的点击事件处理代码
});
</script>

Answer 2

需要在内部 div 元素绑定的事件回调函数中调用 event.stopPropagation() 停止事件冒泡。

innerDom.addEventListener(function (e) {
    // your code...

    // 停止事件冒泡
    e.stopPropagation();
});

这个涉及到浏览器事件的传播机制。

浏览器的事件主要分为捕获阶段和冒泡阶段，当一个 dom 元素触发事件的时候，会从 document -> body -> target 依次触发元素的捕获回调函数，然后从 target -> body -> document 依次触发元素的冒泡回调函数。

当调用e.stopPropagation()时, 事件会停止向上父级元素传递。这样父级元素就无法触发事件回调了。

具体可以看下这篇文章：https://juejin.cn/post/6844903834075021326