我将图像作为背景图像入侵(如图
here所示).我注意到,如果我将鼠标拖过它,它会选择图像,以便不能取消选择.我尝试了以下代码无济于事：
- <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>
有任何想法吗？
解决方法
将其添加到样式表中
- .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;
- }
只需将类selectDisable添加到要阻止选择的元素即可.
拖动效果发生在webkit(chrome,safari,opera)上.它不会发生在Firefox上.
如果您有文本内容,这不适用于您的整个文档,因为那时您将无法选择不太用户友好的文本.
您还可以通过使用相同的selectDisable类在图像顶部添加另一个空div来阻止拖动.
这是一个工作示例：
http://jsfiddle.net/Ma9MT/1/
