html - 如何讓按鈕在手機上僅雙擊時啟動，但在桌面上單擊時啟動？

我有一個按鈕會觸發 JavaScript 中的函數。這個按鈕需要：

• 如果你點擊它一次（但僅在桌面瀏覽器上）就會觸發
• 當你點擊兩次但不點擊一次時觸發（僅在行動版瀏覽器上）

這可以通過 HTML 實現嗎？我正在使用 Angular 7。

我曾嘗試判斷是否正在使用手機瀏覽器，並在 TypeScript（Angular）中使用簡單的 "if" 來處理點擊。但這不起作用，所以有沒有辦法用 HTML/CSS 來做到這一點？

//Pseudo code:
if (browser == mobile) {
    register only double tap;
    don't register single click;
}
else if (browser == desktop) {
    register only single click;
    register double click/tap as 2 separate clicks of button;
}


//HTML Button I'm using (this is in Angular 7):
<button id="{{variable}}" (click)="myFunction(param1, param2)" name="on"> 
{{variable}}</button>

答案＃1

你可以簡單地使用 click 和 dblclick 來根據使用者的滑鼠操作調用方法

我使用這個方法來檢測手機或電腦瀏覽器 👇

export function isMobileBrowser() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

元件 🌠

  clickHandler(){
    if (!isMobileBrowser()) {
    console.log('Hello from 💻');
    this.name = "💻";

    }
  }

  dblclickHandler() {
    if (isMobileBrowser()) {
    console.log('Hello from 📱');
    this.name = "📱";
    }
  }

範本 📜

<button (click)="clickHandler()" (dblclick)="dblclickHandler()">Log a message 🔥</button>

示範 🚀🚀，用手機透過這個連結檢查