javascript - HTML5 可拖动图像 "selecting"并在 Firefox 中搞砸了我的拖动 JavaScript

Question

我正在尝试使图像可拖动，而不求助于 Canvas 解决方案(我有很多其他 DOM 元素需要用于此可视化)。我有一个 fiddle 演示 here这在 Chromium 中运行良好，但在 Firefox 中则不然(我稍后会讨论其他浏览器)。

在 Firefox 中，图像往往会被“选择”，并且 HTML5 可拖动功能似乎会被调用。这意味着图像往往会被拖动，而容器 div 不会随之移动，并且图像也会被选中，从而导致丑陋的蓝色叠加。我尝试用下面的代码修复它，但没有成功(是的，我知道 z-index 技巧不应该起作用，但我正在捕获救命稻草):

HTML

<div id="div1">
    <img id="pic1" draggable="false">
</div>

CSS

#div1 { z-index: 2;}
#pic1 {
    z-index: 1;
    user-drag: none; 
    -moz-user-select: none;
    -webkit-user-drag: none;
}

如何让图像在 Firefox 中拖动时能够正常播放？

Answer 1

我记得很久以前就四处寻找过这个。 这实际上是一个相当古老的修复，但我已经在你的 fiddle 上尝试过它并且似乎有效。

这里的技巧是添加一个事件处理程序，以防止单击鼠标时执行其他处理程序，如下所示:

onmousedown="if (event.preventDefault) event.preventDefault()"

使用 if 的原因是为了避免在旧版本的 IE 上出现错误，因为旧版本的 IE 不具备该功能。 请注意，这可能会导致 mousedown 上的其他事件无法触发。

最后，如果您想防止选择发生，最好的选择是 user-select css property .

就像 MDN 页面所说，这是一个非标准功能，所以一定要测试它，您可以创建一个 css 类，如下所示:

.noselect {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

并将其用在您想要的元素上。

您可以在这个更新的 fiddle 中看到这两个功能:https://jsfiddle.net/us6t8uvd/10/