Как сделать так, чтобы кнопка активировалась только при двойном нажатии на мобильном телефоне, но активировалась одним щелчком мыши на рабочем столе? - PullRequest
Новая
       22

Как сделать так, чтобы кнопка активировалась только при двойном нажатии на мобильном телефоне, но активировалась одним щелчком мыши на рабочем столе?

1 голос
/ 18 июня 2019

У меня есть кнопка, которая запускает функцию в JavaScript. Эта кнопка должна:

  • срабатывает, если вы щелкаете по нему один раз (но только в настольных браузерах)
  • сработает, если вы нажмете его дважды, но не один раз (только в браузерах mobile )

Может ли это быть достигнуто с помощью HTML? Я использую угловой 7.

Я пытался определить, используется ли мобильный браузер, и использовать простое «если» в машинописном наборе (угловое) для обработки клика. Это не сработало, так есть ли способ сделать это с помощью 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 Ответ

0 голосов
/ 18 июня 2019

просто вы можете использовать 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;
  }
}

componentenet ? 

  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 101 , проверьте это с помощью мобильного ссылка

...