title: setTimeout and event propagation
body: <p>I want to create a one-time event triggered by clicking anywhere. This event is created by clicking a button. I do not want the event to trigger upon clicking the button, only any subsequent clicks anywhere (including the button).</p>
  
  <p>So say I've got some html like the following:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="someparent"&gt;
      &lt;div id="btn"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the following javascript (jquery):</p>
  
  <pre><code>$('#btn').click( function() {
    $(document).one('click', function() {
      console.log('triggered');
    });
  });
  
  $('#someparent').click(function() {
    // this must always be triggered
  });
  </code></pre>
  
  <p>I want to avoid stopping event propagation, but in the above example, the event is bound to document, the event then bubbles up, and the event is triggered.</p>
  
  <p>One way to fix this seems to be to wrap the event creation in a timeout:</p>
  
  <pre><code>$('#btn').click( function() {
    setTimeout(function() {
      $(document).one('click', function() {
        console.log('triggered');
      });
    }, 1);
  });
  
  $('#someparent').click(function() {
    // this must always be triggered
  });
  </code></pre>
  
  <p>Now, this works fine, but I'm wondering whether this is safe. Does some notion of order of execution guarantee that this will always work, or is it just working by chance? I know there are other solutions (another nested <code>.one()</code> event for instance), but I'm specifically looking for an answer to how setTimeout and event propagation interoperates.</p>
  
  <p>The following fiddle shows two divs. The first one has the wrong behaviour (the document event is triggered immediately). Clicking the second div, and then anywhere on document (white area) illustrates the wanted behaviour:</p>
  
  <p><a href="https://jsfiddle.net/Lwocuuf8/7/" rel="nofollow">https://jsfiddle.net/Lwocuuf8/7/</a></p>