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

有没有人知道一种方法，可以让图片在 Firefox 中既不能拖动也不能选择，而不需要使用 Javascript？看起来微不足道，但问题是:

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

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

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

那么，有人知道为什么增加 -moz-user-select: none，会以某种方式胜过和禁用 draggable=false？当然，webkit 按预期工作。网上没有关于这件事的消息... 如果我们能一起把这件事曝光就太好了。

编辑: < em > 这是关于防止 UI 元素被无意中拖动和提高可用性——而不是某种蹩脚的复制保护方案尝试。

206204 次浏览
小开
最佳答案

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

.selector {
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: 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;
}

约翰逊:

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' );
};

事情远比想象的复杂。

小开

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

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

然后在 CSS 中:

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

参见此 < strong > JSFiddle 获得一个带有按钮和不同大小选项的实时示例。

小开

你也许可以求助于

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

您可以在 CSS 中使用 pointer-events属性，并将其设置为“ 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中，而且 div是不可拖动的，所以图像是不可拖动的:

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

特别适用于 Windows Edge 浏览器的通用解决方案(如-ms-user-select: none; CSS 规则不起作用) :

window.ondragstart = function() {return false}

注意: 当你仍然需要点击事件(例如，你不能使用 pointer-events: none) ，但是不希望拖动图标图像出现时，这样可以节省你必须添加 draggable="false"到每个 img标记的时间。

小开

我创建了一个 Div元素，它的大小与图像相同，位置为 在图像的顶部。然后，鼠标事件不会转到 image 元素。

小开

这里有一个几乎适用于所有现代浏览器的四部分解决方案:

<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 的底部四行。

小开

您只需将 draggable属性添加到 img标记中。

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

提交答案