如何防止文本被选中？

Question

在我的Web应用程序中，用户有时可能会多次点击同一个按钮，跳过消息和其他内容，导致选中</a>标签。

因此，我该如何使用JavaScript（jQuery）避免这种情况。

- Ben Shelock

---

它会阻止他们继续浏览消息吗？如果不是，那么我建议不要这样做，因为它可能也会在他们想选择文本时阻止。 - Gordon Gustafson

听起来对他们的导航能力不会有影响，只是可能会意外选择。Marek在下面的回答中包含的链接可以仅在某些元素上禁用文本选择。假设Ben只会在那个导致用户问题的<a/>标签上禁用选择。 - sblom

Answer 1

您不需要脚本，只需使用以下CSS代码：

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

- Blowsie

---

提问者可能已经决定要用 JS 来完成这个项目，但你的答案比任何脚本都好。+1 - mavrosxristoforos

在Chrome 25中可以工作，但在IE10中无法工作。 Ctrl+A选择页面上的所有文本。如果我双击文本，则停止选择文本，但是如果我从未使用此CSS的区域拖动到使用此CSS的区域，则仍会突出显示文本。 - Garry English

Answer 2

这个解决方案对我很有帮助：http://chris-barr.com/entry/disable_text_selection_with_jquery/。它涉及到使用jQuery禁用文本选择功能。

$(function(){
    $.extend($.fn.disableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
                $(this).mousedown(function(){return false;});
            }
        });
    });
    $('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});

- Marek Kowalski

---

该网址似乎已经移动至：http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/。 - EricP

链接中的示例与最新版本的Jquery不兼容。$.browser已不存在。 - Garry English

对于那些看到这个答案的人，Blowsie所描述的CSS方法是一个更好的解决方案（并且与链接的jQuery答案做的事情相同）。 - Lachlan McDonald