你能阻止 Angular 组件的主机点击触发吗？

Question

我正在创建一个 Angular 组件，该组件包装原生 <button> 元素和一些附加功能。如果按钮被禁用并且我想复制相同的功能，则按钮不会触发单击事件。即，给定：

<my-button (click)="onClick()" [isDisabled]="true">Save</my-button>

my-button 有没有办法防止onClick() 被调用？

在Angular中你可以通过这种方式监听宿主点击事件，并停止事件的传播：

//Inside my-button component
@HostListener('click', ['$event'])
onHostClick(event: MouseEvent) {
  event.stopPropagation();
}

这可以防止事件冒泡到祖先元素，但不会阻止内置 (click) 输出在同一宿主元素上触发。

有没有办法做到这一点？

---

编辑 1：我现在解决此问题的方法是使用名为“onClick”的不同输出，消费者必须知道使用“onClick”而不是“click”。这并不理想。

编辑 2： 源自 <button> 元素的点击事件已成功停止。但是，如果您像我一样将元素放在按钮标签内，那么这些目标上的单击事件会传播到主机。嗯，应该可以将按钮包装在另一个停止传播的元素中......

Answer 1

您可以执行以下操作：

• 重新定义组件的click事件，点击按钮时触发该事件
• 在组件宿主上设置CSS样式pointer-events: none
• 在按钮上设置 CSS 样式 pointer-events: auto
• 在按钮单击事件处理程序上调用event.stopPropagation()

如果您需要处理组件内部其他元素的点击事件，请在其上设置样式属性pointer-events: auto，并在其点击事件处理程序中调用event.stopPropagation()。

您可以测试this stackblitz中的代码。

import { Component, HostListener, Input, Output, ElementRef, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button',
  host: {
    "[style.pointer-events]": "'none'"
  },
  template: `
    <button (click)="onButtonClick($event)" [disabled]="isDisabled" >...</button>
    <span (click)="onSpanClick($event)">Span element</span>`,
  styles: [`button, span { pointer-events: auto; }`]
})
export class MyCustomComponent {

  @Input() public isDisabled: boolean = false;
  @Output() public click: EventEmitter<MouseEvent> = new EventEmitter();

  onButtonClick(event: MouseEvent) {
    event.stopPropagation();
    this.click.emit(event);
  }

  onSpanClick(event: MouseEvent) {
    event.stopPropagation();
  }
}

---

更新：

由于按钮可以包含 HTML 子元素（span、img 等），您可以添加以下 CSS 样式来防止点击传播到父元素：

:host ::ng-deep button * { 
  pointer-events: none; 
}

感谢@ErikWitkowski his comment 在这个特殊情况下。有关演示，请参阅 this stackblitz。

Answer 2

我认为没有本地方法可以防止事件触发，正如 2016 年 this git issue 所支持的那样：

执行顺序是红鲱鱼 - 同一元素上的事件传播到多个侦听器的顺序当前未定义。这是目前的设计。

您的问题是向侦听器公开的事件是真正的 DOM 事件，并且在提供的事件上调用 stopImmediatePropagation() 会停止执行在此元素上注册的其他侦听器。 但是，由于通过 Angular 注册的所有侦听器都由一个 dom 侦听器代理（出于性能原因），因此对此事件调用 stopImmediatePropagation 无效。

Answer 3

您可以使用本机添加和删除 EventListener。从角度考虑，这绝不是一个好的解决方案。此外，如果您将 disabled 属性放在 button 中，这将不起作用，因为它将覆盖附加的 eventListeners。需要使用 disabled 类。 （或者将 button 包装在 span 中，并从中使用模板引用 #btn。）

StackBlitz

import { Component, OnInit, OnChanges, HostListener, Input, Output, EventEmitter, SimpleChanges, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-button',
  template: `<button [class.disabled]="isDisabled" #btn><span>hey</span></button>`,
  styles: [`button.disabled { opacity:0.5 }`]
})
export class MyButtonComponent implements OnInit, OnChanges {
  disableClick = e => e.stopPropagation();
  @Input() isDisabled: boolean;
  @ViewChild('btn') btn: ElementRef;
  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    if(this.isDisabled) {
      this.btn.nativeElement.addEventListener('click', this.disableClick);
    } else {
      this.btn.nativeElement.removeEventListener('click', this.disableClick);
    }
  }
  ngOnInit() {
  }

}

Answer 4

您可以尝试在捕获模式下停止事件的传播（将 true 作为 addEventListener 调用的最后一个参数，将 window 作为监听对象）。

window.addEventListener('click', (event) => {
    let clickDisallowed = true; // detect if this click is disallowed

    if (event.target === this.elementRef.nativeElement && clickDisallowed) {
        event.stopImmediatePropagation();
    }
}, true);

别忘了取消订阅这个监听器。