单击一个连续渲染的元素

Question

我正在使用以下内容呈现视频进度条：

<div class="video-timeline">
  {{#isolate}}
    <div style="width: {{progressBarWidth}}" class="video-progress-bar"></div>
  {{/isolate}}
</div>

进度条适合时间轴内部，并随着视频时间的推移而向右延伸（基于会话变量）。目标是观察时间轴上的点击次数，以便我可以更改播放位置。

正确观察进度条右侧时间轴上的点击事件。但是，在播放视频时（并且正在不断渲染进度条），进度条本身的点击很少会冒泡到时间线点击处理程序。

我如何观察这些事件，还是有更好的方法来完成这项工作？

更新：如果你绝对需要一个每秒更新一次并由流星控制的元素，那么使用叠加（如datacarl所建议的）可能是最好的。这对我有用，但我最终还是回到了基于jQuery的解决方案，用于该模板的特定部分。尽管我不喜欢混合使用jQuery事件和流星事件，但jQuery提供了更快速响应且更不容易出错的方式来更新进度条。

Answer 1

我认为处理这个问题最简单的方法是在div.video-progress-bar之上绝对定位div.progress-bar-overlay，然后观察点击.progress-bar-overlay。给它与.video-timeline相同的高度和宽度。这样，您无需处理用户是单击.video-timeline还是.video-progress-bar。