亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何禁用禁用元素的 HammerJS(點擊)手勢

如何禁用禁用元素的 HammerJS(點擊)手勢

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

2 回答

?
ITMISS

TA貢獻1871條經驗 獲得超8個贊

我發現了一個很好的使用 css Pointer 事件的技巧


在您的 css 中,您可以設置如下內容:


button[disabled] {

  pointer-events: none

}

這將禁用所有點擊事件。


附加的stackblitz演示


查看完整回答
反對 回復 2021-12-02
?
慕勒3428872

TA貢獻1848條經驗 獲得超6個贊

如果像這樣將事件添加到函數中:


(tap)="toggleButton($event)"

在您的 ts 中,您可以將其用作 event.target,并且會禁用一個屬性,如果禁用的值為 true,則您無法執行函數。


if(event.target.disabled){

   ...do nothing

}


查看完整回答
反對 回復 2021-12-02
  • 2 回答
  • 0 關注
  • 270 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號