嵌套Div点击事件问题：如何让点击的Div仅触发自身绑定函数

你遇到的是JavaScript里很常见的事件冒泡问题：当你点击内层的div时，点击事件会从最内层的元素开始，顺着DOM树向上传递，触发所有父元素的点击事件，所以不管点哪个div，最终都会触发最外层的first()。下面给你几种简单易懂的解决方案，适合新手学习：

方案1：在子元素的点击函数里阻止事件冒泡 #

你可以在second()和third()函数中添加阻止事件冒泡的代码，这样点击子元素时，事件就不会向上传递到父元素了。需要注意的是，函数要接收event参数：

<div onclick="first(event)"> <!-- first div -->
  <div onclick="second(event)"> <!-- second div -->
    <div onclick="third(event)"> <!-- my content here inner div -->
      点击我试试
    </div>
  </div>
</div>

<script>
function first(event) {
  console.log("触发first()");
}

function second(event) {
  console.log("触发second()");
  // 阻止事件向上冒泡
  event.stopPropagation();
}

function third(event) {
  console.log("触发third()");
  // 阻止事件向上冒泡
  event.stopPropagation();
}
</script>

这样点击最内层div只会触发third()，点击中间div只会触发second()，点击最外层div触发first()。

方案2：使用现代事件监听（推荐） #

内联的onclick虽然简单，但不够灵活，推荐用addEventListener来绑定事件，这种方式更符合现代JS的写法，也更容易维护：

<div class="outer"> <!-- first div -->
  <div class="middle"> <!-- second div -->
    <div class="inner"> <!-- my content here inner div -->
      点击我试试
    </div>
  </div>
</div>

<script>
// 获取各个div元素
const outerDiv = document.querySelector('.outer');
const middleDiv = document.querySelector('.middle');
const innerDiv = document.querySelector('.inner');

// 绑定事件
outerDiv.addEventListener('click', function(event) {
  console.log("触发first()");
});

middleDiv.addEventListener('click', function(event) {
  console.log("触发second()");
  event.stopPropagation();
});

innerDiv.addEventListener('click', function(event) {
  console.log("触发third()");
  event.stopPropagation();
});
</script>

额外小知识：事件捕获 vs 事件冒泡 #

如果不想阻止冒泡，你也可以用事件捕获机制（事件从父元素向下传递到子元素），不过对于你的需求来说，阻止冒泡已经足够简单啦。

内容的提问来源于stack exchange，提问作者Adesh Kumar