title: click behind a continually rendered element
body: <p>I'm rendering a video progress bar with the following:</p>
  
  <pre><code>&lt;div class="video-timeline"&gt;
    {{#isolate}}
      &lt;div style="width: {{progressBarWidth}}" class="video-progress-bar"&gt;&lt;/div&gt;
    {{/isolate}}
  &lt;/div&gt;
  </code></pre>
  
  <p>The progress bar fits inside the timeline and extends to the right as the video's time advances (based on a session variable). The goal is to observe clicks on the timeline so I can change the play location.</p>
  
  <p>Click events on the timeline to the right of the progress bar are observed correctly. However, while the video is playing (and the progress bar is being continually rendered) a click on the  progress bar itself will infrequently bubble up to the timeline click handler.</p>
  
  <p><strong>How can I observe these events, or is there a better way to do this altogether?</strong></p>
  
  <p><strong>Update:</strong> Using an overlay (as suggested by datacarl) is probably best if you absolutely need to have an element which is updated multiple times a second and controlled by meteor. This worked for me but, I ended up reverting to a jQuery-based solution for that particular part of the template. As much as I dislike mixing jQuery events and meteor events, jQuery was provided a more responsive and less error-prone way to update the progress bar.</p>