JQuery e.offsetX 跳跃值问题

Question

我正在研究一个视频进度条，它应该具有搜索（拖动或单击以搜索）的能力，我遇到的问题相当混乱，并且与进度条的拖动功能有关。

拖动进度条会从鼠标位置移动到进度条的开头，而不是保持它靠近鼠标位置的正确位置。

此处提供了该问题的演示。

注意：不要担心在您释放鼠标后自动收报机不会保持其值，我的问题与当用户将鼠标拖到进度条上时自动收报机会回到 0% 相关。

Answer 1

解决方案

在不更改标记的情况下，检查触发器（该词是否存在？）是否是#progress（或不是#progress-bar）：

$(document).on('mousemove', '#progress', function(e) {
    if (progressTicking && (e.target.id === 'progress')) {
        ...

这是它的工作演示。

但仍然存在一些错误行为，例如光标在#progress和之间悬停时的差异#progress-ticker，并且有点滞后。

解释

mousemove每当鼠标移入#progress及其子项时，就会触发您的事件。

这称为事件捕获（来自QuirksMode.org的图表）：

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

结果，你的函数每次移动都会被调用两次（几乎，除非你移动得很慢），一次 by #progress，一次 by #progress-ticker。

因此，e的当前目标有一半的时间不是您期望的元素，并且您得到了错误的offsetX= 鼠标在 内 #progress-ticker的偏移量。

建议

您可以查看浏览器的滑块实现，例如在 webkit 中，使用-webkit-appearance: slider-horizontal（这里是 webkit 的值列表）