如何在可点击元素内实现仅触发按钮的点击事件？

嗨，这个问题其实是事件冒泡在搞鬼——当你点击容器里的按钮时，点击事件会从按钮元素向上“冒泡”到它的父容器，所以两个点击事件会先后触发。要实现只触发按钮的点击事件，有几种简单好用的解决办法：

方法一：使用Angular事件修饰符（最简洁） #

Angular内置了事件修饰符，直接在按钮的点击事件上添加.stop就能自动阻止事件冒泡，不用额外写TS逻辑：

<div class="container" (click)="onContainerClick()">
  <button (click.stop)="onButtonClick()">Button</button>
</div>

.stop修饰符的作用就是自动调用event.stopPropagation()，帮我们省去手动处理事件对象的步骤。

方法二：手动阻止事件冒泡 #

如果需要在按钮的点击逻辑里做更多操作，可以通过传递事件对象，手动调用阻止冒泡的方法：

模板代码 #

<div class="container" (click)="onContainerClick()">
  <button (click)="onButtonClick($event)">Button</button>
</div>

TypeScript代码 #

onButtonClick(event: MouseEvent) {
  // 阻止事件向上冒泡到父容器
  event.stopPropagation();
  // 这里写你的按钮点击逻辑
  console.log('按钮被点击了');
}

这样事件就会停在按钮这一层，不会继续传递给容器，自然也就不会触发onContainerClick了。

方法三：在容器事件里判断触发源 #

如果不想改动按钮的事件处理，也可以在容器的点击方法里判断事件的触发目标，只有当点击的是容器本身时才执行逻辑：

模板代码 #

<div class="container" (click)="onContainerClick($event)">
  <button (click)="onButtonClick()">Button</button>
</div>

TypeScript代码 #

onContainerClick(event: MouseEvent) {
  // event.target是实际被点击的元素，event.currentTarget是绑定事件的容器元素
  if (event.target === event.currentTarget) {
    // 这里写你的容器点击逻辑
    console.log('容器被点击了');
  }
}

这种方式适合需要保留容器点击逻辑，但又不想被按钮点击触发的场景。

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