如何为禁用的元素禁用HammerJS（Tap）手势

Question

我正在尝试做的事情：

• 使用模板中的（点击）手势>>
• 如果元素被“禁用”，则不触发（tap）事件

这会使（tap）事件与内置的angular（click）事件保持一致。即，如果元素被禁用，则（点击）不会触发]

Here是已禁用按钮的堆栈示例。如果您点击/单击该项目，我们仍然会看到该事件被触发。

HTML是

<button type="submit" (tap)="toggleButton()" [disabled]="true">
    Button 1
</button>
以及称为的切换方法>
toggleButton(){
    console.log('hello');
    this.buttonClicked = !this.buttonClicked;
}
您将注意到，单击按钮（即使它处于禁用状态）仍在触发。鉴于（点击）的工作原理，这是不希望的。不能使用“点击”代替“点击”，因为这两个事件之间的延迟时间为300毫秒，导致应用程序在移动设备上显示缓慢。
在做一些研究时，我看到了许多有关如何通过扩展HammerGestureConfig的自定义类传递不同配置的问题。如

• Gestures In Angular
• Configure Hammerjs events

但是，这些不会有条件地禁用事件。根据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},
我收到错误
Cannot read property 'indexOf' of undefined
at HammerGesturesPlugin.isCustomEvent (platform-browser.js:3771)
at HammerGesturesPlugin.supports (platform-browser.js:3664)
at EventManager._findPluginFor (platform-browser.js:2383)
at EventManager.addGlobalEventListener (platform-browser.js:2359)
at DefaultDomRenderer2.listen (platform-browser.js:2976)
at BaseAnimationRenderer.listen (animations.js:608)
at DebugRenderer2.listen (core.js:45965)
at listenToElementOutputs (core.js:42909)
at createViewNodes (core.js:44173)
at createRootView (core.js:44081)
最后的方法是遍历（tap）中调用的每个回调方法，并添加逻辑以忽略即使元素被禁用。但这在少数模板中监听（tap）事件时效果不佳。
我希望有一种非常简单的方法来实现这一目标，而我只是想念它。任何帮助，将不胜感激。

谢谢你。

[我正在尝试做的事情：如果元素被“禁用”，则在模板中使用（tap）手势不会触发（tap）事件，这会使（tap）事件与内置角（click）内联。事件。 ...

Answer 1

我找到了一个不错的用CSS pointer-events的把戏

在CSS中，您可以设置以下内容：

Answer 2

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