如何使我的HTML的某些部分无法选择？
[英]How can I make certain parts of my html not selectable?
问题描述
How can I make certain parts of my html not selectable? 
如何使我的HTML的某些部分无法选择？
I have some absolutely positioned divs that keep getting selected if a user tries to select the content of my page. 我有一些绝对定位的div，如果用户试图选择我的页面内容，它会一直被选中。
Is there a way to make it so certain elements (such as those divs) aren't selectable? 有没有办法让某些元素（例如那些div）不可选？
EDIT: The main issue is when someone copies these absolute div's and then pastes them into the rich text editor on my site, the rich text editor breaks on IE. 编辑：主要问题是当有人复制这些绝对div然后将它们粘贴到我的网站上的富文本编辑器中时，富文本编辑器会在IE上中断。
5 个解决方案
解决方案1
9 2010-11-30 02:04:53
For IE, add the attribute unselectable="ON" . 对于IE，添加属性unselectable="ON" 。 ( EDIT : Although it won't completely help) （ 编辑 ：虽然不会完全有帮助）
For Gecko, add the CSS style -moz-user-select: none . 对于Gecko，添加CSS样式-moz-user-select: none 。
For WebKit, add the CSS style -webkit-user-select: none . 对于WebKit，添加CSS样式-webkit-user-select: none 。
解决方案2
4 已采纳 2010-11-30 02:08:20
If you want to just hide selection rectangle, you can use 如果你想隐藏选择矩形，你可以使用
element::selection { background: transparent }
and it's counterpart for Gecko 这是Gecko的对应物
element::-moz-selection { background: transparent }
If you want to help your users select right text to copy to clipboard, you can move the element away. 如果要帮助用户选择要复制到剪贴板的正确文本，可以将元素移开。 Usually browsers retain order of elements as they are defined in HTML when selecting. 通常，浏览器会保留元素的顺序，因为它们在选择时在HTML中定义。 While it is not perfect solution, you can place the element's code in HTML either at the very beginning or very end of <body> tag. 虽然它不是完美的解决方案，但您可以在<body>标记的开头或结尾处将元素的代码放在HTML中。 This way, if user selects something in the middle of the page, the element will be too "far away" to interfere. 这样，如果用户在页面中间选择了某些内容，则该元素将“太远”而无法干涉。
解决方案3
4 2010-11-30 02:12:50
this article might help with a cross-browser solution: (uses jQuery) http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/ 本文可能有助于跨浏览器解决方案:(使用jQuery） http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/
in theory, you can extend the jQUery core using this: 从理论上讲，您可以使用以下方法扩展jQUery核心：
jQuery.fn.extend({
disableSelection : function() {
return this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).addClass('unselectable');
});
}
});
and applying it like this: 并像这样应用它：
// disable selection on selected objects
$('.myClass').disableSelection();
you must make sure you have this in your stylesheet: 你必须确保在样式表中有这个：
.unselectable {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
looks as if it basically does what SLaks and Sime have mentioned. 看起来好像它基本上是什么SLaks和Sime提到的。 i haven't tried it, but i'd be interested to know if it works 我没有尝试过，但我有兴趣知道它是否有效
解决方案4
3 2010-11-30 02:02:01
You can use the ::selection pseudo-element to make the selection of a certain element "invisible": 您可以使用::selection伪元素来选择某个元素“不可见”：
p::selection { background-color:transparent; }
p::-moz-selection { background-color:transparent; }
However, that doesn't work in IE. 但是，这在IE中不起作用。
解决方案5
2 2010-11-30 08:26:04
jQuery解决方案：
$(".unselectable").disableSelection();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.