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

Question

有没有人知道如何在Firefox中使图像不可拖动且不可选择 - 同时不使用Javascript？看似微不足道,但问题在于:

1)可以在Firefox中拖动和突出显示:

<img src="...">

2)所以我们添加它,但拖动时仍然可以突出显示图像:

<img src="..." draggable="false">

3)所以我们添加这个,以解决突出显示问题,但后来违反直觉,图像再次变得可拖动.很奇怪,我知道!使用FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

那么,有没有人知道为什么添加"-moz-user-select:none",会以某种方式特朗普并禁用"draggable = false"？当然,webkit按预期工作.关于这一点,Interwebs上没有任何内容......如果我们能够一起发光,那就太好了.

谢谢!!

编辑: 这是关于保持UI元素不被无意拖动并提高可用性 - 不是一些跛脚尝试复制保护方案:-)

Answer 1

将以下CSS属性设置为图像:

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

Answer 2

我一直忘记分享我的解决方案,如果不使用JS,我找不到办法做到这一点.在一些极端情况下@Jeffery A Wooden建议的CSS不会覆盖.

这是我应用于所有UI容器的内容,不需要应用于每个元素,因为它在所有子元素上都有用.

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

这比现在要复杂得多.

Answer 3

您可以pointer-events在CSS中使用该属性,并将其设置为"none"

img {
    pointer-events: none;
}

编辑

这将阻止(点击)事件.那么更好的解决方案就是

<img draggable="false" (dragstart)="false;" class="unselectable">

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

Answer 4

根据具体情况,将图像作为divCSS 的背景图像通常很有帮助.

<div id='my-image'></div>

然后在CSS中:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

有关按钮和不同大小调整选项的实例,请参阅此JSFiddle.

Answer 5

你可能只是求助于

<img src="..." style="pointer-events: none;">

Answer 6

一个特别适用于 Windows Edge 浏览器的通用解决方案（因为 -ms-user-select: none; CSS 规则不起作用）：

window.ondragstart = function() {return false}

注意：当您仍然需要单击事件（即您不能使用）但不希望出现拖动图标图像时，这可以避免您必须添加draggable="false"到每个img标签pointer-events: none。