如何让JavaScript点击事件仅触发于Div元素而非其子按钮？

这里有几种实用的实现方式，你可以根据场景选择：

方法1：阻止按钮的事件冒泡 #

给内部按钮添加点击事件，切断事件向上冒泡的传递链，让容器接收不到按钮的点击事件：

<div onclick="myFunc()" style="height:200px;width:200px;border:1px solid #ccc;">
  <button onclick="event.stopPropagation()"></button>
</div>
<script>
function myFunc() {
  console.log('执行myFunc');
}
</script>

原理：浏览器默认的事件冒泡机制会让点击事件从触发元素向上传递到父元素，event.stopPropagation()能直接中断这个传递过程，容器的点击逻辑自然不会被触发。

方法2：在容器的点击事件中判断触发源 #

修改容器的点击事件，传入event对象，通过判断实际点击的元素类型来过滤触发逻辑：

<div onclick="myFunc(event)" style="height:200px;width:200px;border:1px solid #ccc;">
  <button></button>
</div>
<script>
function myFunc(event) {
  // 若点击的不是按钮，才执行函数逻辑
  if (event.target.tagName !== 'BUTTON') {
    console.log('执行myFunc');
  }
}
</script>

原理：event.target指向实际被点击的DOM元素，通过标签名判断可以直接排除按钮的点击触发。如果按钮内部还有子元素，也可以用event.target.closest('button')来检查点击区域是否属于按钮范围。

方法3：使用事件委托（更推荐的现代写法） #

把事件绑定从HTML移到JS中，用事件委托的方式实现结构与逻辑分离：

<div id="container" style="height:200px;width:200px;border:1px solid #ccc;">
  <button></button>
</div>
<script>
const container = document.getElementById('container');
container.addEventListener('click', function(event) {
  // 检查点击区域不属于按钮及其子元素时，执行函数
  if (!event.target.closest('button')) {
    myFunc();
  }
});

function myFunc() {
  console.log('执行myFunc');
}
</script>

原理：利用事件冒泡特性，父容器监听所有子元素的点击事件，通过closest()方法快速判断点击区域归属，不属于按钮范围则触发目标函数。这种写法更易维护，尤其适合内部元素较多的场景。

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