Как отличить одинарный щелчок от двойного

#javascript-events

#javascript #jquery #jquery-события

Вопрос:

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

 initMouseHandling:function(){
                    var dragged = null, 
                    _mouseP,
                    selected,
                    nearest = null,
                    show = true,
                    num_console = 0,
                    timeout,
                    clicks,
                    delay = 500;
                                        
                    
var handler =  {

 
   
single_double_click: function (element, clicked, double_click, timeout) {

$(element).observe('click', function (event) {
      clicks;
    if (clicks === 1) {
        var timeoutCallback = function (event) {
            if (clicks === 1) {
                clicked.call(this, event);
            } else {
                double_click.call(this, event);
            }
            clicks = 0;
        };
        timeoutCallback.bind(this, event).delay(timeout / 1000);
    }
}.bind(this));
return false;
},

clicked:function(e){
...
},
dragged:function(e){
...
},
dropped:function(e){
...
},
over_edge:function(e){
...
},
over_node:function(e){
...
},
double_click:function(e){
...
}}

canvas.mousemove(handler.over_node);
canvas.mousemove(handler.over_edge);
canvas.mousedown(handler.single_double_click);
//canvas.mousedown(handler.clicked);
//canvas.dblclick(handler.double_click);
}
  

В нем говорится:

«Неперехваченная ошибка типа: объект [object object] не имеет метода ‘observe'»

Независимо от использования $(canvas) или $(window) , как я видел в других местах…

Я не знаю, должен ли я вводить обработчики в качестве параметров или нет, почему я не могу использовать «наблюдать», и если для случая, подобного моему, я должен вызывать свои обработчики подобным образом:

 clicked.call(this, event);
double_click.call(this, event);           
  

Есть предложения?

Ответ №1:

Вы изучали dblclick от jQuery?

Ответ №2:

Функция jquery отсутствует observe , и ошибка сообщает вам об этом. Для обнаружения двойных щелчков вы запускаете тайм-аут при первом щелчке,
отменяете его, если щелчок длится по тайм-ауту (200 мс), и запускаете одиночный щелчок или запускаете двойной щелчок при следующем щелчке:

 let timeout;
$("button").on("click", () => {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
    alert("double click")
    return;
  }

  timeout = setTimeout(() => {
    alert("single click");
    timeout = null;
  }, 200); // 200ms, try other values for best ux
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>