如何禁用禁用元素的 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] {

  pointer-events: none

}

这将禁用所有点击事件。

附加的stackblitz演示

Answer 2

如果像这样将事件添加到函数中：

(tap)="toggleButton($event)"

在您的 ts 中，您可以将其用作 event.target，并且会禁用一个属性，如果禁用的值为 true，则您无法执行函数。

if(event.target.disabled){

   ...do nothing

}