JQuery e.offsetX 跳跃数值问题

Question

我正在制作一个视频进度条，它应该具有拖动或单击以查找的功能，但我遇到的问题相当令人困惑，并与进度条的拖动功能有关。

在拖动时，进度滑块会从鼠标位置移动到进度条的起始位置，而不是保持在靠近鼠标位置的正确位置。

可以在此处看到问题的演示here。

注意：不要担心滑块在释放鼠标后未保持其值，我的问题与用户在进度条上拖动鼠标时滑块返回到0％有关。

- Adonis K. Kakoulidis

---

+1 有趣的故障！顺便说一下，您应该在问题中直接添加一些代码。 - Maen

Answer 1

解决方案

在不改变标记的情况下，检查触发器是否为#progress（而不是#progress-bar）:

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

这里是它的工作示例。

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

解释

当鼠标在#progress及其子元素中移动时，会触发您的事件mousemove。

这被称为事件捕捉（源自QuirksMode.org的图表）：

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

因此，每次移动时（几乎是），您的功能会被调用两次，一次由 #progress ，一次由 #progress-ticker。

因此，e 的当前目标在很大程度上并不是您期望的元素，因此您获得了错误的 offsetX = 鼠标在 #progress-ticker 内的偏移量。

建议

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

- Bigood

---

嘿 @Bigood，感谢你的时间。所以这是一个事件捕获问题？ - Adonis K. Kakoulidis

@AdonisK。确实！请看事件捕获案例（我将在我的答案中添加它）。 - Maen

Answer 2

我刚刚在制作拖放界面时遇到了这个问题。

当浏览器尝试选择我正在拖动的元素时，这种情况发生了。

user-select: none;

在容器上使用这个代码解决了我的问题。

- Andrew Bullock