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

Question

我正在尝试做的事情：

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

这将使 (tap) 事件与内置的 angular (click) 事件内联。即如果元素被禁用，（点击）不会触发

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

HTML 是

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

以及调用的切换方法

toggleButton(){
    console.log('hello');
    this.buttonClicked = !this.buttonClicked;
}

您会注意到，单击按钮（即使它被禁用）仍然会触发。考虑到 (click) 的工作原理，这是不希望的。由于两个事件之间存在 300 毫秒的延迟，导致应用程序在移动设备上显示迟缓，因此不能使用 Click 而不是点击。

在做一些研究时，我看到了一些关于如何通过扩展 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) 事件时，这并不能很好地工作。

我希望有一种非常简单的方法可以实现这一点，而我只是想念它。任何帮助将不胜感激。

谢谢你。

Answer 1

我用 css Pointer events找到了一个不错的技巧

在你的 CSS 中，你可以设置如下内容：

button[disabled] {
  pointer-events: none
}

这将禁用所有点击事件。

附stackblitz演示

Answer 2

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

(tap)="toggleButton($event)"

在你的ts中你可以用它作为event.target，会有一个属性disabled，如果disabled值为true，你就不能执行函数。

if(event.target.disabled){
   ...do nothing

}