Слушайте двойной щелчок, а не щелчок

Question

Мне просто интересно, почему click событие происходит, когда я dbclick элемент?

У меня есть этот код: ( JSBIN )

HTML

<p id="hello">Hello World</p>

JavaScript

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
}, false);
document.getElementById('hello').addEventListener('dbclick', function(){
  this.style.background = 'yellow';
}, false);

Он должен делать разные вещи для щелчка и двойного щелчка, но кажется, что когда вы дважды щелкаете по событию p, то он ловит click заранее и игнорирует двойной щелчок.

Я тоже пытался preventDefault событие click. Как я могу слушать только dbclick?

UPDATE

В моем коде была опечатка. dbclick неверно. Это dblclick. В любом случае проблема все еще существует. При двойном щелчке пользователя происходит событие click.

Это обновленный код, подтверждающий это: ( JSBin )

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
  this.innerText = "Hello World clicked";
}, false);
document.getElementById('hello').addEventListener('dblclick', function(){
  this.style.background = 'green';
}, false); 

Answer 1

dblclick не является магическим: хотя второе быстрое click запускает событие dblclick, первое click уже запустило свой собственный обработчик событий.

В большинстве случаев вы не должны устанавливать обасобытие click и dblclick для элемента DOM;когда вы это сделаете, вам понадобятся хитрые трюки с таймерами, чтобы смягчить проблему.

В этом конкретном сценарии вам также нужно будет исправить опечатку (s/dbclick/dblclick/), чтобы событие вообще сработало.

^{Также обратите внимание, что dblclick на самом деле не является частью спецификации DOM (отсутствует в DOM Level 2 1.6.2 ).По этой причине он известен как « DOM Level 0 ».}

Answer 2

Изменить 'dbclick' на 'dblclick'.

Answer 3

Используйте dblclick вместо dbclick.

Answer 4

Это работает для меня (используется библиотека d3, но d также может быть объектом словаря):

function log(s){try{console.log(s)}catch(e){}} // for debugging

var click_d = null

function click(d){
    log("click")
    click_d = d
    setTimeout(click_action, 200)
}

function click_action(){
    log("click_action")
    if(click_d == null){
        log("aborted")
        return
    }
    d = click_d

    // do things with d
}

function doubleclick(d){
    log("dblclick")
    click_d = null

    // do things with d
}

Answer 5

Чтобы ответить на пересмотренный вопрос (Как взаимно обрабатывать клики и dblclick), вы должны отложить событие click до тех пор, пока dblclick больше не станет невозможным.Это дает небольшое отставание (например, 500 мс) для обработки кликов, но в противном случае DOM не может предсказать, будет ли поступить второй клик.

Пример сценария в этом ответе: https://stackoverflow.com/a/11057483/43217

Answer 6

Я подозреваю, что вы работаете на медленном компьютере.На медленном компьютере двойной щелчок можно интерпретировать как два щелчка со значительным промежутком времени.Вы можете поэкспериментировать с настройкой мыши и изменить настройку двойного щелчка.Это должно устранить проблему.Если ваш компьютер работает очень быстро и не имеет проблемы с задержкой, ваша проблема может быть в другом месте.Маловероятно, что двойной щелчок можно воспринимать как одиночный щелчок как ошибку кода (ту, которую вы опубликовали).Проблема может быть в другом месте, если не медлительность компьютера.