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

componenet?

  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>

demo ??，通过此link

通过移动设备进行检查

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

1 个答案: