我正在嘗試做的事情:在模板中使用(點擊)手勢如果元素被“禁用”,則不要觸發 (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},
如何禁用禁用元素的 HammerJS(點擊)手勢
肥皂起泡泡
2021-12-02 16:09:45