如何使按钮仅在移动设备上双击激活，但在桌面上单击激活?

Question

我有一个按钮，可以在javascript中触发一个函数。 此按钮需要：

• 单击一次时触发(但仅在桌面浏览器上)
• 如果您点击它两次但不点击一次(仅在移动浏览器上)，则触发

这可以通过html实现吗？我正在使用角度 7。

我试图感知是否正在使用移动浏览器，并在打字稿(角度)中使用简单的"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>

Answer 1

简单地说，您可以使用click和dblclick来调用基于用户鼠标操作的方法

我使用此方法检测移动或PC浏览器 👇

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>

演示🚀🚀，通过此链接通过手机检查此内容