我正在构建带有一些文本元素(例如选项卡名称)的HTMLUI,这些文本元素在被选中时看起来很糟糕。不幸的是,对于用户来说,双击选项卡名称非常容易,该名称在许多浏览器中都是默认选择的。
我也许可以用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,您将需要使用unselectable希望不可选择的元素的属性。您可以使用HTML中的属性进行设置:
unselectable
<div id="foo" unselectable="on" class="unselectable">...</div>
遗憾的是,该属性没有被继承,这意味着您必须在内每个元素的开始标记中放置一个属性<div>。如果这是一个问题,您可以改为使用JavaScript为元素的后代递归执行此操作:
<div>
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"));