Angular 4中不同类型事件的冒泡阻止失效问题求助

这个问题我之前也碰到过，核心原因是click和dblclick是完全独立的事件类型——你在按钮的click事件里调用stopPropagation()，只能阻止click事件向上冒泡，管不了dblclick事件的传播。而且双击操作的触发顺序是：先触发两次click，最后才会触发dblclick，所以父元素的dblclick事件还是会接收到来自按钮的冒泡。

这里有两种靠谱的解决方案，你可以根据场景选择：

方案一：给按钮绑定dblclick事件并阻止冒泡 #

直接在按钮上监听dblclick事件，在处理函数里阻止事件向父组件传播，这样父元素的goBack()就不会被触发了。

修改模板代码：

<mat-list (dblclick)="goBack()">
  <button (click)="add($event)" (dblclick)="handleButtonDblClick($event)"> Add </button>
</mat-list>

在组件类中添加处理函数：

handleButtonDblClick(event: MouseEvent) {
  event.stopPropagation();
  // 如果双击按钮不需要额外逻辑，只保留stopPropagation即可
}

方案二：在父组件的goBack()中过滤事件源 #

如果不想给按钮额外绑定事件，也可以在父组件的goBack()里判断事件的触发源是不是按钮区域，如果是就直接返回，不执行后续逻辑。

修改组件类的goBack()函数：

goBack(event: MouseEvent) {
  const target = event.target as HTMLElement;
  // 判断目标元素是否是按钮，或者按钮的子元素（如果按钮内部有嵌套元素）
  if (target.tagName === 'BUTTON' || target.closest('button')) {
    return;
  }
  // 原本的goBack逻辑代码
}

补充说明 #

两种方案都能解决问题：

• 方案一更直接，明确阻止按钮的dblclick事件冒泡，逻辑清晰；
• 方案二更适合父元素下有多个按钮或交互元素的场景，不需要逐个元素绑定dblclick事件。

内容的提问来源于stack exchange，提问作者Steven K.