我正在制作一个视频进度条,它应该具有拖动或单击以查找的功能,但我遇到的问题相当令人困惑,并与进度条的拖动功能有关。
在拖动时,进度滑块会从鼠标位置移动到进度条的起始位置,而不是保持在靠近鼠标位置的正确位置。
可以在此处看到问题的演示here。
注意:不要担心滑块在释放鼠标后未保持其值,我的问题与用户在进度条上拖动鼠标时滑块返回到0%有关。
我正在制作一个视频进度条,它应该具有拖动或单击以查找的功能,但我遇到的问题相当令人困惑,并与进度条的拖动功能有关。
在拖动时,进度滑块会从鼠标位置移动到进度条的起始位置,而不是保持在靠近鼠标位置的正确位置。
可以在此处看到问题的演示here。
注意:不要担心滑块在释放鼠标后未保持其值,我的问题与用户在进度条上拖动鼠标时滑块返回到0%有关。
在不改变标记的情况下,检查触发器是否为#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 的值列表)
我刚刚在制作拖放界面时遇到了这个问题。
当浏览器尝试选择我正在拖动的元素时,这种情况发生了。
user-select: none;
在容器上使用这个代码解决了我的问题。