title: Listen to double click not click
body: <p>I'm just wondering why <code>click</code> event happening when I <code>dbclick</code> an element? </p>
  
  <p>I have this code:(<a href="http://jsbin.com/utecey/edit#javascript,html,live" rel="noreferrer"><strong>JSBIN</strong></a>)</p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;p id="hello"&gt;Hello World&lt;/p&gt;
  </code></pre>
  
  <p><em>JavaScript</em></p>
  
  <pre><code>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);
  </code></pre>
  
  <p>It should do different things for click and double click, but it seems when you double click on the <code>p</code> it catch <code>click</code> event in advance and ignore double click.</p>
  
  <p>I tried <code>preventDefault</code> the <code>click</code> event too. 
  How can I listen to just <code>dbclick</code>?</p>
  
  <h1>UPDATE</h1>
  
  <p>I had a typo in my code. <code>dbclick</code> is wrong. It's <code>dblclick</code>. Anyway the problem still exist. When user double clicks the <code>click</code> event happens. </p>
  
  <p>This is updated code that prove it:(<a href="http://jsbin.com/utecey/3/edit" rel="noreferrer">JSBin</a>)</p>
  
  <pre><code>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); 
  </code></pre>