Html 防止选择图像和文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5915023/
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 images and text to be selected
提问by Freesn?w
I have an image being hacked in as a background image (as shown here). I've noticed that if I drag my mouse over it though, it selected the image so that it can't be deselected. I've tried the following code to no avail:
我有一个图像中的背景图像被黑客攻击（如所示在这里）。我注意到，如果我将鼠标拖过它，它会选择图像，因此无法取消选择。我试过以下代码无济于事：
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
top:0px;
left:0px;
}
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
Any ideas?
有任何想法吗？
回答by Piotr Kula
Add this to your style sheet
将此添加到您的样式表
.selectDisable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.selectEnable {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
Just add the class selectDisableto the element you want to prevent from being selected.
只需将类添加selectDisable到要防止被选择的元素。
The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.
拖动效果发生在 webkit(chrome、safari、opera) 上。它不会发生在 Firefox 上。
Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.
如果您有文本内容，这不适用于您的整个文档，因为这样您将无法选择文本，这对用户来说不是很友好。
You could also prevent dragging by adding another empty divon top of your image with the same selectDisableclass.
您还可以通过div在具有相同selectDisable类的图像顶部添加另一个空白来防止拖动。
Here is a working example:
http://jsfiddle.net/xugy6shd/3/
这是一个工作示例：http:
//jsfiddle.net/xugy6shd/3/
回答by lord_t
If you load image as div's background you can't select it.
如果您将图像加载为div背景，则无法选择它。
EDIT
编辑
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
回答by Stephen Poole
draggable="false"worked for me
draggable="false"为我工作
回答by Misha Reyzlin
If you are using jQuery I've written a tiny jQuery plugin - wrapper that does pretty much what ppumkin wrote:
如果您使用的是 jQuery，我已经编写了一个很小的 jQuery 插件 - 包装器几乎可以完成 ppumkin 所写的内容：
(plugin is in js part along with an example usage) http://jsfiddle.net/gryzzly/HtvB8/
（插件在 js 部分以及示例用法）http://jsfiddle.net/gryzzly/HtvB8/
