onDrag 事件 clientX 在 Firefox 中始终为 0答案

【问题标题】：onDrag event clientX is always 0 in FirefoxonDrag 事件 clientX 在 Firefox 中始终为 0
【发布时间】：2021-08-10 11:36:03
【问题描述】：

我在 codesandbox.io (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);

和我的 dragEnd 事件处理程序上的 event.preventDefault()，但仍然相同。

有人可以帮我吗？

整个代码都可以在我上面粘贴的代码框链接中找到。

编辑：ON DRAG 事件正在触发，但以下属性每次都相同

screenX: 0

screenY: 0

clientX: 0

clientY: 0

pageX: 0

pageY: 0

导致问题。为什么这一切都是 0？

【问题讨论】：

您确定没有触发drag 事件吗？虽然 clientX 为 0 并且因此没有通过 if 条件，但它对我来说已经被解雇了。
嘿@DanMacák 你是对的，拖动事件正在触发，但所有值（clientX clientY 等）都是 0。那么如何在 firefox 中实现滑块？这么多 UI 库中已经有这么多滑块了……你知道吗？
我的猜测是库使用基于指针而不是基于拖动的方法。让我在答案中对此进行扩展。

标签： javascript html css reactjs

【解决方案1】：

在 Firefox 中，您可以在触发拖动事件之前设置 dataTransfer

d = document.getElementById('d');

d.addEventListener('drag', function(e){
    console.log("drag:", e)
});

d.addEventListener('dragstart', function(e){
    e.dataTransfer.setData('application/node type', this);
    console.log("dragstart:", e)
});

您可以在此链接中查看推荐的拖动类型 Drag Types

【讨论】：

嘿@Morteza，我已经在设置dataTransfer，我也更新了我的问题

【解决方案2】：

event.dataTransfer 在这里无关紧要，实际问题是 Firefox 在drag 事件期间不跟踪指针位置。要了解原因，请查看this great answer 来解决与您类似的问题。

这意味着您不能使用drag 根据拖动元素的指针来更新元素的位置。你可以改用dragover:

document.addEventListener('dragover', updateProgress)

与拖动不同，dragover 跟踪指针位置，因此您可以使用它来更新滑块的位置。不过有一个问题。在您的页面上，可能有多个可拖动元素，因此您可能希望在 ondragover 侦听器中检查正在拖动的元素。但是你不能轻易做到这一点，因为document 是dragover 的目标，而不是被拖动的元素。因此，您还需要检查在触发 dragstart 后正在拖动哪个元素，并可能清理 dragend 上的 ondragover 侦听器。

另一种方法是特别使用Pointer events API、pointerdown、pointermove 和pointerup。实现工作类似，但指针事件在浏览器（与 drag 事件相反）和设备之间应该更加一致，因为指针事件在单个 API 后面统一了多种输入 - 触摸、鼠标、笔。

【讨论】：