Question

我要做什么：

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

这会使（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的自定义类传递不同配置的问题。例如

但是，这些不会有条件地禁用事件。根据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）中调用的每个回调方法，并添加逻辑以忽略该元素，即使该元素已禁用。但是，当我们在少数模板中监听（轻击）事件时，效果就不太好了。

我希望有一种简单的方法来实现此目的，而我只是想念它。任何帮助将不胜感激。

谢谢。

Answer 1

我发现CSS Pointer events的妙招

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

button[disabled] {
  pointer-events: none
}

这将禁用所有点击事件。

附带了stackblitz演示

Answer 2

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

(tap)="toggleButton($event)"

您可以将其用作event.target，并且将禁用一个属性，并且如果禁用的值为true，则无法执行功能。

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

}

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

2 个答案: