I'm just wondering why
click event happening when I dbclick an element?
I have this code:(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);
It should do different things for
click and double
click, but it seems when you double
click on the p it catch
click event in advance and ignore double
click.
I tried preventDefault the
click event too.
How can I listen to just dbclick?
UPDATE
I had a typo in my code. dbclick is wrong. It's dblclick. Anyway the problem still exist. When user double clicks the
click event happens.
This is updated code that prove it:(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);
