Html 在不使用 JS 的情况下防止图像可拖动或可选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12906789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing an image from being draggable or selectable without using JS
提问by tmkly3
Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox, without resorting to Javascript? Seems trivial, but here's the issue:
有没有人知道一种方法可以使图像在 Firefox 中不可拖动和不可选择 - 同时 - 在不求助于 Javascript 的情况下？看似微不足道，但问题来了：
1) Can be dragged and highlighted in Firefox:
1) 可以在 Firefox 中拖动和突出显示：
<img src="...">
2) So we add this, but image can still be highlighted while dragging:
2）所以我们添加了这个，但是在拖动时仍然可以突出显示图像：
<img src="..." draggable="false">
3) So we add this, to fix the highlighting issue, but then counterintuitively, the image become draggable again.Weird, I know! Using FF 16.0.1
3）所以我们添加了这个，以解决突出显示的问题，但与直觉相反，图像再次变得可拖动。奇怪，我知道！使用 FF 16.0.1
<img src="..." draggable="false" style="-moz-user-select: none;">
So, does anyone know why adding "-moz-user-select: none", would somehow trump and disable "draggable=false"? Of course, webkit works as expected. Nothing is out there on the Interwebs about this...It would be great if we could shine some light on this together.
那么，有谁知道为什么添加“-moz-user-select：none”，会以某种方式胜过并禁用“draggable=false”？当然，webkit 按预期工作。互联网上没有关于此的任何内容……如果我们能一起对此有所启发，那就太好了。
Thanks!!
谢谢！！
Edit:This is about keeping UI elements from being inadvertently dragged and improving usability - not some lame attempt at a copy protection scheme :-)
编辑：这是为了防止 UI 元素被无意中拖动并提高可用性 - 而不是对复制保护方案的一些蹩脚尝试:-)
回答by Jeff Wooden
Set the following CSS properties to the image:
为图像设置以下 CSS 属性：
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
回答by tmkly3
I've been forgetting to share my solution, I couldn't find a way to do this without using JS. There are some corner cases where @Jeffery A Wooden's suggested CSS just wont cover.
我一直忘记分享我的解决方案，我找不到不使用 JS 的方法。在某些极端情况下，@Jeffery A Wooden 建议的 CSS 无法涵盖。
This is what I apply to all of my UI containers, no need to apply to each element since it recuses on all the child elements.
这就是我应用于所有 UI 容器的内容，不需要应用于每个元素，因为它回避了所有子元素。
CSS:
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:
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' );
};
This was way more complicated than it needed to be.
这比它需要的要复杂得多。
回答by Linh Dam
You can use the pointer-eventsproperty in your CSS, and set it equal to 'none'
您可以pointer-events在 CSS 中使用该属性，并将其设置为“无”
img {
pointer-events: none;
}
Edited
已编辑
this will block (click) event. So better solution would be
这将阻止（点击）事件。所以更好的解决方案是
<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;
}
回答by Nick Merrill
Depending on the situation, it is often helpful to make the image a background image of a divwith CSS.
根据情况，div使用 CSS使图像成为 a 的背景图像通常会有所帮助。
<div id='my-image'></div>
Then in CSS:
然后在 CSS 中：
#my-image {
background-image: url('/img/foo.png');
width: ???px;
height: ???px;
}
See this JSFiddlefor a live example with a button and a different sizing option.
有关带有按钮和不同大小选项的实时示例，请参阅此JSFiddle。
回答by Thomas Bachem
You could probably just resort to
你可能只是诉诸
<img src="..." style="pointer-events: none;">
回答by Philip Murphy
A generic solution especially for Windows Edge browser (as the -ms-user-select: none; CSS rule doesn't work):
特别适用于 Windows Edge 浏览器的通用解决方案（因为 -ms-user-select: none; CSS 规则不起作用）：
window.ondragstart = function() {return false}
Note: This can save you having to add draggable="false"to every imgtag when you still need the click event (i.e. you can't use pointer-events: none), but don't want the drag icon image to appear.
注意：当您仍然需要单击事件（即您不能使用）但不希望出现拖动图标图像时，这可以避免您必须添加draggable="false"到每个img标签pointer-events: none。
回答by joshua pogi 28
You could set the image as a background image. Since it resides in a div, and the divis undraggable, the image will be undraggable:
您可以将图像设置为背景图像。由于它驻留在 a 中div，并且div是不可拖动的，因此图像将是不可拖动的：
<div style="background-image: url("image.jpg");">
</div>
回答by User
I created a divelement which has the same size as the image and is positioned on top of the image. Then, the mouse events do not go to the image element.
我创建了一个与图像大小相同的div元素，并位于图像的顶部。然后，鼠标事件不会转到图像元素。
