title: Add click event after another click event
body: <p>I am trying to add a click event to the document in another click event attached to a button. However, the second click event is fired right away as if the event overlaps. I looked into stopping propagation, using a timeout, removing the listener, <code>preventDefault()</code>, but I've had no success.</p>
  
  <p>This is an example of what I am trying to do.</p>
  
  <pre><code>document.getElementById("test").addEventListener('click', first);
  
  function first(){
      document.addEventListener('click', second);
  }
  function second(){
      alert("I'm not suppose to appear after the first click, only the second.");
  }
  </code></pre>
  
  <p>For testing, I am using a simple button</p>
  
  <pre><code>&lt;button type="button" id="test"&gt;Click&lt;/button&gt;
  </code></pre>
  
  <p>I am doing this without JQuery. Is this possible?</p>