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

Question

我想做什么：

在模板中使用（点击）手势
如果元素是 'disabled'

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

Here 是禁用按钮的 stackbliz 示例。如果您 tap/click 在该项目上，我们仍然会看到事件被触发。

HTML 是

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

和调用的切换方法

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

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

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

Gestures In Angular
Configure Hammerjs events

但是，这些不会有条件地禁用事件。根据 HammerJS 文档，有一个 'enable' 属性接受布尔值或 returns 一个布尔值的函数。当我尝试创建 class

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

}

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

How to disable HammerJS (Tap) gesture for disabled Elements

javascript

hammer.js

angular