在不使用 JS 的情况下防止图像可拖动或可选择

Question

有谁知道在 Firefox 中不使用 Javascript 来同时使图像不可拖动且不可选择的方法？看似微不足道，但问题是：

1. 可以在 Firefox 中拖动和突出显示：

2. 所以我们添加了这个，但图像仍然可以在拖动时突出显示：

3. 所以我们添加了这个，以解决突出显示的问题，但与直觉相反， 图像再次变得可拖动。 奇怪，我知道！使用 FF 16.0.1

那么，有谁知道为什么添加 -moz-user-select: none 会以某种方式胜过并禁用 draggable=false ？当然，webkit 按预期工作。 Interwebs 上没有关于此的内容……如果我们能一起阐明这一点，那就太好了。

编辑： 这是关于防止 UI 元素被无意中拖动并提高可用性 - 而不是对复制保护方案的一些蹩脚尝试。

原文由 tmkly3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为图像设置以下 CSS 属性：

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

原文由 Jeff Wooden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个由四部分组成的解决方案，几乎适用于所有现代浏览器：

 <img src="foobar.jpg" draggable="false" ondragstart="return false;">

 img
{
    user-drag: none;
    -webkit-user-drag: none;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

如果要允许选择/突出显示，可以删除 CSS 的底部四行。

原文由 Pikamander2 发布，翻译遵循 CC BY-SA 4.0 许可协议