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容器的内容，不需要应用于每个元素，因为它可以回避所有子元素。

CSS：

.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;
}

JS：

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

这比它需要的更复杂。

Answer 3

您可以在CSS中使用pointer-events属性，并将其设置为等于＆＃39;无＆＃39;

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

根据具体情况，使用CSS将图像作为div的背景图像通常很有帮助。

<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

您可以将图像设置为背景图像。由于它位于div，而div是不可分割的，因此图像将无法分页：

<div style="background-image: url("image.jpg");">
</div>

Answer 7

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

window.ondragstart = function（）{return false}

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

Answer 8

我创建了一个 div 元素，该元素的大小与图片相同，并且位于图片的顶部上。然后，鼠标事件不会转到图像元素。

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

8 个答案: