html - Ako nastaviť tlačidlo tak, aby sa na mobile aktivovalo len dvojitým ťuknutím, ale na počítači jediným kliknutím?

Mám tlačidlo, ktoré spúšťa funkciu v javascripte. Toto tlačidlo musí:

• spustí sa, ak naň kliknete raz (ale iba na desktopových prehliadačoch)
• spustí sa, ak ho ťuknete dvakrát, ale nie raz (len na mobilných prehliadačoch)

Je to možné dosiahnuť pomocou HTML? Používam Angular 7.

Skúsil som zistiť, či sa používa mobilný prehliadač, a použiť jednoduché „if“ v TypeScripte (Angular) na spracovanie kliknutia. To však nefungovalo, takže existuje spôsob, ako to urobiť pomocou 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>

Odpoveď č. 1

jednoducho môžete použiť click a dblclick na vyvolanie metód na základe akcie myši používateľa

Použil som túto metódu na zistenie mobilného alebo počítačového prehliadača 👇

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;
  }
}

komponent 🌠

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

    }
  }

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

šablóna 📜

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

demo 🚀🚀, skontrolujte to na mobile pomocou tohto odkazu