javascript - JQuery e.offsetX 跳跃值问题

Question

我正在开发一个视频进度条，它应该具有搜索(拖动或单击以搜索)的能力，我遇到的问题相当令人困惑，并且与进度条的拖动功能有关。

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

问题的演示可用 here .

注意:不要担心松开鼠标后自动收报机不保持其值，我的问题是当用户将鼠标拖到进度上时自动收录机回到 0%栏。

Answer 1

解决方案

在不更改标记的情况下，检查触发器(该词是否存在？)是否为 #progress(或不是 #progress-bar):

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

Here's a working demo of it.

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

解释

只要鼠标在 #progress 及其子项中移动，您的事件 mousemove 就会被触发。

它被称为事件捕获(图表来自QuirksMode.org):

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

因此，每次移动都会调用您的函数两次(几乎，除非您移动得非常慢)，一次由 #progress 调用，一次由 #progress-ticker 调用。

所以，e 的当前目标是一半时间，而不是您期望的元素，并且您得到了错误的 offsetX =鼠标在#progress-ticker。

建议

您可以使用 -webkit-appearance: slider-horizo​​ntal ( here's a list of values for webkit ) 查看浏览器对 slider 的实现，例如在 webkit 中