javascript - 在文档外部拖动游览期间右键单击拖动指针事件传递的问题

问题描述

document.documentElement.addEventListener('pointermove', (ev) => {
  const el = document.createElement('DIV');
  el.append([ev.buttons, ev.offsetX, ev.offsetY, ev.movementX, ev.movementY].join(', '));
  document.body.prepend(el);
}, true);
document.documentElement.addEventListener('contextmenu', (ev) => { ev.preventDefault(); });

* {
  user-select:none;
  -webkit-user-select:none;
}

<body>content</body>

请使用上面的“运行代码片段”尝试以下操作：

在文档中移动鼠标，它会在文档上的任何时候泵送事件
左键单击从内部开始拖动并向外拖动。无论您是否退出页面，事件都会继续。
单击鼠标中键拖动，观察到相同的行为。
右键单击拖动，退出文档导致没有事件传递<--- BUG IN BROWSER？
右键拖动，离开文档区域前也开始左键拖动（例如，向下鼠标右键，向下鼠标左键，然后按住，向外拖动）：再次一切正常
左键拖动，然后在离开文档区域之前开始右键拖动（例如，鼠标左键，鼠标右键，然后按住，向外拖动）：再次出现同样的问题
不再需要任何测试用例，但是用中鼠标代替左鼠标的行为与 5 和 6 相同

我在 Ubuntu Linux 18.04 的 Chrome 中遇到了这个问题。将发布来自其他浏览器和操作系统的更多测试结果。

在 Ubuntu 上的 Firefox 中，这里的代码片段在拖到文档外时根本不起作用（可能这是与框架有关的问题），但可以观察其他 webapp，例如https://threejs.org/editor/响应用鼠标右键拖动。这表明特定于 chrome 的错误或限制，并且可能特定于 Ubuntu/Linux。
在 macOS 10.15.7 上的 Safari 14.0.3 中，行为相似，但鼠标中键也表现出与鼠标右键相同的问题！
Firefox 82 和 87 在 macOS 上的行为与在 Ubuntu 上的行为相同
macOS 中的 Chrome 很有趣，它与 Ubuntu 大致相同，但鼠标中键的行为有所下降：它可以在退出片段的文档区域时工作，但在窗口外失败。只有鼠标左键可以在窗口外拖动。
Windows 上的 Chrome：没有任何问题
Windows 上的 Firefox：这个代码片段测试器根本不起作用，但在https://threejs.org/editor/等适当的 web 应用程序中没有任何问题
Windows 上的 Edge：正如预期的那样，与 Windows 上的 Chrome 具有相同的行为。

总结一下：

Linux：在浏览器窗口外右键单击拖动游览不起作用
macOS：中键单击和右键单击在浏览器窗口外拖动偏移不起作用
Windows：一切正常

当在我的 CAD Web 应用程序中使用鼠标右键来环绕/操纵 3D 相机时，这是一个关键的 UX 问题。

mousemove除了pointermove在通话中启用/禁用捕获模式之外，我还进行了测试，但均addEventListener无济于事。

我希望有一些其他事件可以覆盖或阻止默认以恢复预期的行为，因为由于浏览器限制，我不希望将其重新映射到鼠标中键（已用于不同的 3D 交互） .

标签： javascripthtmlbrowsermouseeventmousemove

javascript - 在文档外部拖动游览期间右键单击拖动指针事件传递的问题

问题描述

解决方案

推荐阅读