Angular中如何避免div的click事件被内部select操作误触发？

这个问题我之前也遇到过，本质是事件冒泡在搞鬼——当你操作<select>元素时，触发的事件会顺着DOM树向上传播，最终触发了外层<div>的selectItem方法。这里有几个简单有效的解决办法：

方法一：在Select上阻止点击事件冒泡 #

直接给<select>添加点击事件，调用stopPropagation()阻断事件向上传递，这样点击下拉框时就不会触发外层的click事件了：

<div *ngFor="test of tests" (click)="selectItem(test)">
  <div>{{test.number}}</div>
  <div>
    <select (click)="$event.stopPropagation()" (change)="selectGroup(group)">
      <option *ngFor="let destination of groupDestinations" [(value)]="destination.code">{{destination.displayname}}</option>
    </select>
  </div>
</div>

方法二：在change处理方法中阻止冒泡 #

如果你希望在处理下拉选项变更的同时阻断事件冒泡，可以把事件对象传入selectGroup方法，在方法内部调用stopPropagation()：

首先修改模板，传递事件对象：

<div *ngFor="test of tests" (click)="selectItem(test)">
  <div>{{test.number}}</div>
  <div>
    <select (change)="selectGroup(group, $event)">
      <option *ngFor="let destination of groupDestinations" [(value)]="destination.code">{{destination.displayname}}</option>
    </select>
  </div>
</div>

然后在组件类的方法中处理：

selectGroup(group: any, event: Event) {
  // 先阻断事件冒泡
  event.stopPropagation();
  // 这里写你原本的业务逻辑
}

方法三：使用Angular内置的事件修饰符.stop #

Angular提供了简化事件处理的修饰符，直接给<select>的点击事件加上.stop，就能自动阻断冒泡，不需要手动写逻辑：

<div *ngFor="test of tests" (click)="selectItem(test)">
  <div>{{test.number}}</div>
  <div>
    <select (click.stop)="true" (change)="selectGroup(group)">
      <option *ngFor="let destination of groupDestinations" [(value)]="destination.code">{{destination.displayname}}</option>
    </select>
  </div>
</div>

小建议 #

如果只是单纯想避免触发外层点击，推荐用方法一或方法三，更直观且不需要改动业务逻辑；如果你的selectGroup方法本身需要和事件对象交互，方法二会更合适。

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