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

Мне просто интересно, почему событие 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);

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

В этом ответе приведен пример script: fooobar.com/questions/253402/...

Ответ 5

Это работает для меня (с использованием библиотеки 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
}

Ответ 6

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