如何禁用禁用元素的 HammerJS（点击）手势

Question

我正在尝试做的事情：

在模板中使用（点击）手势

如果元素被“禁用”，则不要触发 (tap) 事件

这将使 (tap) 事件与内置的 angular (click) 事件一致。ie (click) 如果元素被禁用，则不会触发

这是禁用按钮的 stackbliz 示例。如果您点击/单击该项目，我们仍然会看到正在触发的事件。

HTML 是

<button type="submit" (tap)="toggleButton()" [disabled]="true">

    Button 1

</button>

以及被调用的切换方法

toggleButton(){

    console.log('hello');

    this.buttonClicked = !this.buttonClicked;

}

正如您将注意到的，单击按钮（即使它已禁用）仍在触发。鉴于 (click) 的工作方式，这是不受欢迎的。使用 Click 而不是 tap 不是一种选择，因为这两个事件之间的 300 毫秒延迟会导致应用程序在移动设备上显得缓慢。

在做一些研究时，我看到了许多关于如何通过扩展 HammerGestureConfig 的自定义类传递不同配置的问题。如

角度手势

配置 Hammerjs 事件

但是，这些不会有条件地禁用事件。根据 HammerJS 文档，有一个“启用”属性可以接受布尔值或返回布尔值的函数。当我尝试创建一个类时

import {HammerGestureConfig} from '@angular/platform-browser';

import {ElementRef} from '@angular/core';

declare var Hammer: any;

export class HammerGestureConfigCustomTap  extends HammerGestureConfig {

  e: HTMLElement;

  public buildHammer(element: HTMLElement) {

    this.e = element;

    const options = {};

    const mc = new Hammer(element, options);

    // keep default angular config

    mc.get('pinch').set({enable: true});

    mc.get('rotate').set({enable: true});

    mc.get('tap').set({enable: this.enabled });

    // retain support for angular overrides object

    for (const eventName in this.overrides) {

      mc.get(eventName).set(this.overrides[eventName]);

    }

    console.log(mc);

    return mc;

  }

  private enabled(): boolean {

    return !this.e.attributes['disabled'];

  }

}

并在应用程序模块中，确保提供它

{ provide: HAMMER_GESTURE_CONFIG, useValue: HammerGestureConfigCustomTap},

Answer 1

我发现了一个很好的使用 css Pointer 事件的技巧在您的 css 中，您可以设置如下内容：button[disabled] {&nbsp; pointer-events: none}这将禁用所有点击事件。附加的stackblitz演示

Answer 2

如果像这样将事件添加到函数中：(tap)="toggleButton($event)"在您的 ts 中，您可以将其用作 event.target，并且会禁用一个属性，如果禁用的值为 true，则您无法执行函数。if(event.target.disabled){&nbsp; &nbsp;...do nothing}