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

ОБНОВИТЬ

У меня была опечатка в моем коде.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);