Html 角度-防止禁用按钮上的单击事件

我试图阻止禁用按钮上的单击事件，换句话说，阻止删除禁用属性的某些用户调用某些操作

目前，我有以下代码来执行此操作：

执行操作

工作正常，但这不是一个好的解决方案，因为我必须为我的应用程序中的所有按钮执行此操作（相信我，很容易忘记执行此操作，即使是一个Linter也帮不了我）

为了寻找更可靠的解决方案，我认为

指令

可以帮助我：

import { Directive, HostListener, Input, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: 'button'
})
export class ButtonDirective {
  @Input() set disabled(value: boolean) {
    this._disabled = value != null;
    this.renderer2.setAttribute(this.elementRef.nativeElement, 'disabled', `${this._disabled}`);
  }

  private _disabled: boolean;

  constructor(
    private readonly elementRef: ElementRef,
    private readonly renderer2: Renderer2
  ) { }

  @HostListener('click', ['$event'])
  onClick(mouseEvent: MouseEvent) {
    // nothing here does what I'm expecting
    if (this._disabled) {
      mouseEvent.preventDefault();
      mouseEvent.stopImmediatePropagation();
      mouseEvent.stopPropagation();

      return false; // just for test
    }
  }
}

执行操作

…然而，它完全不起作用。它不会阻止

单击事件。是否有任何解决方案，我不必在其调用中控制操作本身


防止禁用按钮上的单击事件

如果禁用了
属性
，则不会发生单击

当用户决定使用devtools时
但是，如果用户编辑HTML并手动删除禁用的属性，则会发生单击。您可以尝试按照建议进行检查，但浏览器是一个不安全的环境。用户仍然能够代表网页执行任何代码，而不考虑您可能进行的任何前端检查

防止禁用按钮上的单击事件

如果禁用了
属性
，则不会发生单击

当用户决定使用devtools时
但是，如果用户编辑HTML并手动删除禁用的属性，则会发生单击。您可以尝试按照建议进行检查，但浏览器是一个不安全的环境。用户仍然能够代表网页执行任何代码，而不考虑您可能进行的任何前端检查
 在您的指令中，您可以这样做。您可以通过在捕获阶段向父级添加事件侦听器来实现

ngOnInit() {
    this.elementRef.nativeElement.parentElement.addEventListener('click',(e) => {
      if(this._disabled && e.target.tagName === 'BUTTON') {
        e.stopImmediatePropagation();
        e.stopPropagation();
      }
    }, true);
  }

您可以在指令的
ondestory
中删除侦听器，您可以这样做。您可以通过在捕获阶段向父级添加事件侦听器来实现

ngOnInit() {
    this.elementRef.nativeElement.parentElement.addEventListener('click',(e) => {
      if(this._disabled && e.target.tagName === 'BUTTON') {
        e.stopImmediatePropagation();
        e.stopPropagation();
      }
    }, true);
  }

您可以在
onDestroy
dev_054我的ans有帮助吗？dev_054我的ans有帮助吗？感谢您的回答，这是一个有趣的解决方案，但是它可以阻止任何对父对象的单击，例如，使用
单击
的div。样本：是的，明白了，但如果你能把你的按钮包装成div或任何其他标签。这就解决了问题。再更新一次答案，以检查targe是否为按钮。感谢您的回答，这是一个有趣的解决方案，但是它阻止了任何对父项的单击，甚至是带有
单击的div
。样本：是的，明白了，但如果你能把你的按钮包装成div或任何其他标签。这就解决了问题。再更新一次答案，检查targe是否为按钮。嘿@basarat，是的，我知道如果不使用devtools，
禁用的按钮不会触发
单击
，但是OP就是这样。我正在寻找一个与我所介绍的不同的解决方案。我不想在每个组件上控制它。如果问题不清楚，请告诉我。嘿@basarat，是的，我知道如果您不使用devtools，
禁用的按钮不会触发
单击
，但是OP就是这样。我正在寻找一个与我所介绍的不同的解决方案。我不想在每个组件上控制它。如果问题不清楚，请告诉我。
ngOnInit() {
    this.elementRef.nativeElement.parentElement.addEventListener('click',(e) => {
      if(this._disabled && e.target.tagName === 'BUTTON') {
        e.stopImmediatePropagation();
        e.stopPropagation();
      }
    }, true);
  }