防止不使用JS拖动图像或选择图像

有谁知道在不使用Javascript的情况下同时使Firefox中的图片不可拖动和不可选择的方法吗？似乎微不足道，但这是问题所在：

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：无”，会以某种方式胜过并禁用“ draggable = false”？当然，webkit可以按预期工作。Interweb上对此一无所知...如果我们能够共同对此有所启发，那就太好了。

谢谢！！

编辑： 这是关于防止UI元素被意外拖动并提高可用性-并非在复制保护方案上有些la脚的尝试：-)

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

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

我一直忘了分享我的解决方案，如果不使用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' ); 
};

这比需要的要复杂得多。

您可以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;
}

根据情况，div使用CSS 将图片设为背景图片通常会很有帮助。

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

然后在CSS中：

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

请参阅此JSFiddle，以获取带有按钮和不同大小选择的实时示例。

您可能只求助于

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

通用解决方案，尤其适用于Windows Edge浏览器（如-ms-user-select：none； CSS规则不起作用）：

window.ondragstart = function() {return false}

注意：这样可以节省您在仍然需要click事件（即，不能使用）但不希望出现拖动图标图像时添加draggable="false"到每个img标记pointer-events: none的麻烦。

您可以将图像设置为背景图像。由于它位于中div，并且div不可拖动，因此图像将不可拖动：

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

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