如何让嵌套在可点击div内的按钮独立触发自身事件？

这是前端开发里非常常见的事件冒泡坑——当你点击内层按钮时，浏览器会把这个点击事件从目标元素（按钮）向上逐层传递到它的父元素、祖父元素……直到最顶层的document，所以外层div的点击事件也被顺带触发了。要解决这个问题，核心就是切断事件的冒泡路径，下面给你几种实用的实现方式：

1. 原生JavaScript：使用event.stopPropagation() #

这是最基础也最通用的方法，在按钮的点击事件处理函数里调用这个方法，就能阻止事件继续向上传播：

// 给外层div绑定点击事件
const outerDiv = document.querySelector('.outer-div');
outerDiv.addEventListener('click', () => {
  console.log('外层div的操作触发了');
});

// 给内层按钮绑定点击事件，并阻止冒泡
const innerBtn = document.querySelector('.inner-btn');
innerBtn.addEventListener('click', (event) => {
  event.stopPropagation(); // 关键：阻止事件冒泡到父元素
  console.log('按钮自身的操作触发了');
  // 这里写按钮的业务逻辑
});

2. jQuery 写法（如果你在用jQuery） #

逻辑和原生一致，只是语法更简洁：

$('.outer-div').click(() => {
  console.log('外层div的操作触发了');
});

$('.inner-btn').click((event) => {
  event.stopPropagation();
  console.log('按钮自身的操作触发了');
});

3. 别搞混这两个方法！ #

很多新手容易把stopPropagation()和preventDefault()弄混，这里特意区分下：

• event.stopPropagation()：阻止事件向上冒泡，正是我们这里需要的
• event.preventDefault()：阻止元素的默认行为（比如a标签跳转、表单提交），和事件冒泡完全无关，别用错哦

4. 框架中的简便写法（额外补充） #

如果你用Vue、React这类框架，还有更省心的写法：

• Vue：直接在按钮的点击事件后加.stop修饰符：<button @click.stop="btnClick">点击</button>
• React：和原生逻辑一致，在事件处理函数里调用event.stopPropagation()即可

内容的提问来源于stack exchange，提问作者Jesus Guadiana