停止突出显示 HTML 文本

Question

我的部分页面需要双击，这会产生不良影响，有时用户会无意中突出显示页面上的某些文本。

这真的很不整洁，但是除了使用图像而不是文本之外，有没有一种巧妙的方法来阻止这种情况的发生？

谢谢

Answer 1

正如@arunes 所建议的，您可以在大多数浏览器中使用 CSS 来实现这一点。但是我读到这不适用于 IE 6-8（至少）。因此，为此，您可能需要以下内容：

document.getElementById("divDoubleClick").onselectstart = function() { return false; };

Answer 2

这对我有用

按照建议将css样式放入

body, div
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

还可以添加这些以允许在表单字段中进行选择

input, textarea, .userselecton
{
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
}

请注意需要的 -moz-none 或重新启用输入不起作用。

对于IE我添加

<script type="text/javascript">
    window.addEvent( "domready", function()
    {
        document.addEvent( "selectstart", function(e)
        {
            if ( (e.target.tagName == "INPUT") ||
             (e.target.tagName == "TEXTAREA") ||
                 (e.target.hasClass("userselecton")))
            {
                return true;
            }
            return false;
        } );
    } );
</script>

这不仅可以防止选择背景文本，还可以在输入字段和您放置 userseleton 类的元素上进行选择。

Answer 3

这里是 css 禁用文本选择。 How to disable text selection highlighting using CSS?

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;