有没有办法让文本在HTML页面上不可选？
我使用一些文本元素构build了一个HTML UI，比如选项卡名称，在select时看起来很糟糕。 不幸的是，用户很容易双击一个标签名称，在许多浏览器中默认select它。
我也许可以用JavaScript技巧解决这个问题（我也想看到这些答案），但是我真的希望直接在CSS / HTML中有一些东西可以在所有浏览器中使用。
在大多数浏览器中，这可以使用CSS来实现：
*.unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } 对于IE <10和Opera，您需要使用您希望取消select的元素的不可选属性。 您可以使用HTML中的属性来设置它：
<div id="foo" unselectable="on" class="unselectable">...</div>
可悲的是，这个属性没有被inheritance，这意味着你必须在<div>的每个元素的开始标签中放置一个属性。 如果这是一个问题，你可以使用JavaScript来recursion地为元素的后代做这件事：
function makeUnselectable(node) { if (node.nodeType == 1) { node.setAttribute("unselectable", "on"); } var child = node.firstChild; while (child) { makeUnselectable(child); child = child.nextSibling; } } makeUnselectable(document.getElementById("foo"));
<script type="text/javascript"> /*********************************************** * Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ function disableSelection(target){ if (typeof target.onselectstart!="undefined") //IE route target.onselectstart=function(){return false} else if (typeof target.style.MozUserSelect!="undefined") //Firefox route target.style.MozUserSelect="none" else //All other route (ie: Opera) target.onmousedown=function(){return false} target.style.cursor = "default" } //Sample usages //disableSelection(document.body) //Disable text selection on entire body //disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv" </script>
编辑
所有正确的CSS变化是：
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
尝试这个：
<div onselectstart="return false">some stuff</div>
简单，但有效…在所有主stream浏览器的当前版本中工作。
对于Firefox，您可以将CSS声明“-moz-user-select”应用于“none”。 看看他们的文档， 用户select 。
这是对未来“用户select”的“预览”，因此Opera或基于WebKit的浏览器可能会支持这一function。 我也记得为Internet Explorerfind一些东西，但我不记得是什么:)。
无论如何，除非文本select使得某些dynamicfunction失效，否则您不应该真正地覆盖用户期望从网页中获得什么，并且能够select他们想要的任何文本。
我发现在这里描述的CSS的一些成功水平http://www.quirksmode.org/css/selection.html ：
::selection { background-color: transparent; }
它处理了我在AIR应用程序（WebKit引擎）中使用一些ThemeRoller ul元素时遇到的大多数问题。 仍然得到一个小的（约15×15）无select的补丁被选中，但是之前select了一半的页面。
绝对位置的文本区域与Z指数更高的div，并给这些div一个透明的GIF背景graphics。
多加思考之后注意一下 – 你需要将这些“封面”链接起来，所以点击它们会把你带到标签所在的位置，这意味着你可以/应该通过设置锚点元素来display:box ，宽度和高度设置以及透明背景图像。
有关抑制select的原因的示例，请参见SIMILE TImeline ，它使用拖放来浏览时间线，在此期间，意外的垂直鼠标移动导致标签意外突出显示，这看起来很奇怪。
对于Safari， -khtml-user-select: none ，就像Mozilla的-moz-user-select （或者在JavaScript中， target.style.KhtmlUserSelect="none"; ）。
“如果你的内容真的很有趣，那么你最终可以做些什么来保护它”
这是真的，但是根据我的经验，大多数抄袭与“最终”或极客或决心的剽窃者或类似的东西无关。 它通常是无知的人随便抄袭，即使是一个简单的，容易失败的保护（很容易被我们这样的人打败），阻止他们的工作。 他们不知道任何关于“查看源代码”或caching或其他任何东西……他们甚至不知道什么是networking浏览器或他们正在使用一个。
对于那些感兴趣的人来说，这里有一个Sass mixin（scss）。 指南针 / CSS 3似乎没有用户select混合。
// @usage use within a rule // ex. img {@include user-select(none);} // @param assumed valid user-select value @mixin user-select($value) { & { -webkit-touch-callout: $value; -webkit-user-select: $value; -khtml-user-select: $value; -moz-user-select: $value; -ms-user-select: $value; user-select: $value; } }
虽然Compass会以更强大的方式来实现，也就是只增加对你select的供应商的支持。
如果看起来不好，可以使用CSS来改变选定部分的外观。
任何JavaScript或CSS方法都很容易被Firebug绕过（就像Flickr的情况）。
您可以使用CSS中的::selection伪元素来改变高亮颜色。
如果选项卡是链接，并且处于活动状态的虚线矩形是关注的，那么也可以将其删除（当然可以考虑可用性）。
closures可选性有很多场合提高了用户体验。
例如，允许用户在页面上复制文本块而不复制与其关联的任何界面元素的文本（这将在要被复制的文本中散布）。
图像也可以select。
使用JavaScript来取消select文本是有限制的，因为即使在您想要select的地方也可能会发生这种情况。 为了确保丰富和成功的职业生涯，避开所有需要能力去影响或pipe理浏览器的所有要求，除非他们付出的代价是非常好的。
以下在Firefox中的作品有趣的是，如果我删除写行不工作。 任何人都有任何洞察，为什么写行是必要的。
<script type="text/javascript"> document.write("."); document.body.style.MozUserSelect='none'; </script>
