JQuery в событии "двойного щелчка" (dblclick для мобильных устройств)

Ответ 1

В итоге я создал собственную функцию двойного щелчка, которая будет работать как на мобильном, так и на настольном компьютере:

var touchtime = 0;
$(".target").on("click", function() {
    if (touchtime == 0) {
        // set first click
        touchtime = new Date().getTime();
    } else {
        // compare first click to this click and see if they occurred within double click threshold
        if (((new Date().getTime()) - touchtime) < 800) {
            // double click occurred
            alert("double clicked");
            touchtime = 0;
        } else {
            // not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="target">Double click me</div>

Ответ 2

Вы можете связать несколько прослушивателей событий с элементом и использовать событие jQuery tap для сенсорных устройств.

$( ".target" ).on({
  dbclick: function() {
    //do stuff
  }, touch: function() {
    //do the same stuff
  }
});

Ответ 3

Отмеченный ответ @JRulle, похоже, работает только для одного объекта, если у вас много экземпляров с тем же классом, они будут рассматриваться как один объект см. пример
Пример скрипта

Мое решение, похоже, работает в таких случаях

var touchtime = 0;
$('.target').on('click', function() {
  if (touchtime == 0) {
    touchtime = new Date().getTime();
  } else {
    if (((new Date().getTime()) - touchtime) < 800) {
      alert("double clicked");
      touchtime = 0;
    } else {
      touchtime = 0;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="target">click me!</p>
<p class="target">then click me!</p>

<a href="#">click link</a>

Ответ 4

Добавьте это в ваш index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Я обнаружил, что функция мобильного масштабирования будет сбрасывать Jquery dblclick. В основном это говорит о том, что ваш видовой экран не изменится эффективно, отключив зум. Это работает для меня на моем Nexus 5 под управлением Chrome.

Ответ 5

У меня есть усовершенствование кода выше, который не обнаружил двойной щелчок после одного щелчка:

var touchtime = 0;
$(".target").on("click", function() {
  if (((new Date().getTime()) - touchtime) < 500) {
    alert("double clicked");
  }
  touchtime = new Date().getTime();
});

Этот код обнаруживает все двойные клики. Я также уменьшил время касания до 500 мс (стандартное время двойного клика).

Ответ 6

Спасибо за решение - я только добавил время ожидания, чтобы их можно было рассматривать как отдельные события.

var touchtime = 0;
var delay = 800;
var action = null;
$(".target").on("click", function() {
  /*Double Click */
  if((new Date().getTime() - touchtime) < delay){
     clearTimeout(action)
     alert('dbl');
     touchtime=0;
  }
  /* Single Click */
  else{
     touchtime = new Date().getTime();
     action = setTimeout(function(){
        alert('single');
     },delay);
  }
}));

Хотя я не проверял его, возможно, стоит добавить следующее в раздел заголовка любого HTML-кода <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> согласно: " user-scalable = no "или не" user-scalable = no "

Ответ 7

Это оно... в CoffeeScript

onDblClick = -> "...your function to be fired..."
dbl_click = null
$(element).on 'mousedown', ->
   onDblClick() if dbl_click
   dbl_click = true
   setTimeout () ->
       dbl_click = false            
   , 250

Ответ 8

Вам нужно ввести "return false" в конец функции, как показано ниже

var touchtime = 0;
$('.dbclickopen').click(function() {
    if(touchtime == 0) {
        //set first click
        touchtime = new Date().getTime();
    } else {
        //compare first click to this click and see if they occurred within double click threshold
        if(((new Date().getTime())-touchtime) < 800) {
            //double click occurred
            touchtime = 0;
            window.location = this.href;
        } else {
            //not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    }
    return false;
});