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/