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

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 его коту ch 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 is not actually part of the DOM specification at all (нет в DOM Level 2 1.6.2). По этой причине он известен как «DOM Level 0».}

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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