我在codesandbox.io上创建了一个视频播放器进度条（https://codesandbox.io/s/seekbar-with-thumbnail-and-time-tooltips-forked-h5x8k?file=/src/Progressbar.tsx https://codesandbox.io/s/seekbar-with-thumbnail-and-time-tooltips-forked-h5x8k?file=/src/Progressbar.tsx），在 chrome 上运行良好，但在其他浏览器上运行不佳。
特别是在 Firefox 上，进度条滑块不起作用，dragStart 和 DragEnd 事件正常触发，但 onDrag 事件不触发。
onDrag 事件的 clientX clientY 等的值都是错误的。
经过一番谷歌搜索后，我发现了有关 dataTransfer 的信息，并将其添加到拖动启动事件处理程序中......
event.dataTransfer.setData("application/x-moz-node", event.target.id);
and event.preventDefault()在我的 DragEnd 事件处理程序上，但仍然相同。
有人可以帮我吗？
完整的代码可以在我上面粘贴的codesandbox链接中找到。
编辑：拖动事件正在触发，但以下属性每次都相同
screenX: 0
screenY: 0
clientX: 0
clientY: 0
pageX: 0
pageY: 0
导致了这个问题。为什么这一切都是 0？
event.dataTransfer在这里无关紧要，实际问题是 Firefox 在执行过程中不跟踪指针位置drag事件。要了解原因，请检查这个很好的答案 https://stackoverflow.com/a/63365865/4256274与您类似的问题。
这意味着你不能使用drag根据拖动元素的指针更新元素的位置。你可以用什么来代替dragover:
document.addEventListener('dragover', updateProgress)
与拖动不同，dragover跟踪指针位置，以便您可以使用它来更新滑块的位置。但有一个问题。在您的页面上，可能有多个可拖动元素，因此您可能需要检查 ondragover 侦听器正在拖动哪个元素。但你不能轻易做到这一点，因为document的目标是dragover，而不是拖动的元素。所以你还需要检查哪个元素被拖动了一次dragstart被解雇，也许会清理 ondragover 侦听器dragend.
另一种方法是使用指针事件API https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events, pointerdown, pointermove and pointerup尤其。实现工作类似，但指针事件在浏览器之间应该更加一致（与drag事件）和设备，因为指针事件在单个 API 后面统一了多种输入（触摸、鼠标、笔）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
