可拖动按钮时如何将单击事件设置为禁用？答案

【问题标题】：How can I set the click event to disabled when draggable a button?可拖动按钮时如何将单击事件设置为禁用？
【发布时间】：2021-10-11 04:18:46
【问题描述】：

我创建了一个可移动的.directive.ts，您可以使用它在前端移动对象。到目前为止，该指令也有效。不幸的是，当我移动按钮时，我的点击事件总是打开。有没有办法在可拖动的开始处停用单击并在可拖动的结束处重新激活它？我的 Stackblitz：https://stackblitz.com/edit/draggable-system-azomjp?file=app%2Fapp.component.html

我的代码：

// movable.directive.ts
 @Input('appMovable') set movable(movable: boolean) {
    this.enabled = movable;
  }

  @HostListener('dragStart', ['$event']) onDragStart(event: PointerEvent): void {
    this.moving = true;
    this.startPosition = {
      x: event.clientX - this.position.x,
      y: event.clientY - this.position.y
    };
  }

  @HostListener('dragMove', ['$event']) onDragMove(event: PointerEvent): void {
    this.position = {
      x: event.clientX - this.startPosition.x,
      y: event.clientY - this.startPosition.y,
    };
  }

  @HostListener('dragEnd') onDragEnd(): void {
    this.moving = false;

    if (this.reset) {
      this.position = {
        x: 0,
        y: 0,
      };
    }
  }

// HTML
<button (click)="openAlert()" [appMovable]="true">
  My Button
</button>

// TS
openAlert() {
    alert("Hello World!");
  }

【问题讨论】：

标签： javascript angular typescript draggable

【解决方案1】：

似乎在 Github 上一直在讨论这个问题，还有一个通过 rxjs 使用 fromEvent 的示例，但我在你的 stackblitz 中没有成功使用它。

https://github.com/angular/angular/issues/9587

作为替代方案，这个粗略的 POC 展示了您可以通过执行以下操作来完成此任务的一种方法。

DI Renderer2 in moveable.directive.ts

constructor(public element: ElementRef, private sanitizer: DomSanitizer, private ren: Renderer2) {
    super();
  }

然后在你的dragMove 中设置pointer-events: none

@HostListener('dragMove', ['$event']) onDragMove(event: PointerEvent): void {
    this.ren.setStyle(this.element.nativeElement, 'pointer-events', 'none');
    this.position = {

然后在你的dragEnd 中删除它

 @HostListener('dragEnd') onDragEnd(): void {
    this.ren.removeStyle(this.element.nativeElement, 'pointer-events');
    this.moving = false;

堆栈闪电战

https://stackblitz.com/edit/draggable-system-etearc?file=app/movable/moveable.directive.ts

【讨论】：