如何单击其中包含文本的div而不突出显示/选择文本

Question

  

可能重复：
  What is the best way to prevent highlighting of text when clicking on its containing div in javascript?

我正在使用+和-文本按钮（div）构建自己的简单计数器。我有它在另一个div上执行.focus（）的地方，.countDisplay它应该从关闭计数按钮。最佳示例：http://jsbin.com/uxewej/2/edit如果您连续几次点击+按钮，有时会看起来像这样：

有没有办法阻止文本被选中/突出显示，如果用户连续点击其中一个按钮？谢谢！

Answer 1

你可以使用CSS做到这一点：http://jsbin.com/uxewej/8/

html{
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

如果您需要让用户选择某些内容，请不要使用html CSS选择器。

更新

使用FF，Chrome和IE9进行测试

补充CSS声明的通用解决方案

function toggleEnableSelectStart(enable) {
    document.onmousedown = function (e) { return enable; };
    document.onselectstart = function (e) { return enable; };
}

jQuery(document).ready(function () {
    //Disable default text selection behavior
    toggleEnableSelectStart(false);

    //Let inputs text selection possible
    jQuery("input[type=text]").focusin(function () { toggleEnableSelectStart(true); });
    jQuery("input[type=text]").mouseover(function () { toggleEnableSelectStart(true); });
    jQuery("input[type=text]").focusout(function () { toggleEnableSelectStart(false); });
    jQuery("input[type=text]").mouseout(function () { toggleEnableSelectStart(false); });
}); 

对作者感到抱歉，我不记得有一天我发现了哪一天，但它很聪明！

更新2

要避免仅在按钮上单击选择行为，请删除CSS技巧并使用

http://jsbin.com/uxewej/11/edit

function toggleEnableSelectStart(enable) {
    document.onmousedown = function (e) { return enable; };
    document.onselectstart = function (e) { return enable; };
}

jQuery(document).ready(function () {
//Disable default text selection behavior
toggleEnableSelectStart(false);

//Let inputs text selection possible
jQuery(".countButton").focusin(function () { toggleEnableSelectStart(false); });
jQuery(".countButton").mouseover(function () { toggleEnableSelectStart(false); });
jQuery(".countButton").focusout(function () { toggleEnableSelectStart(true); });
jQuery(".countButton").mouseout(function () { toggleEnableSelectStart(true); });
}); 

更新3

如果要禁用所选元素的选择，请按照this link

进行操作

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

Answer 2

我个人使用按钮标签而不是span，它在语义上更有意义，并且对于这种情况也更好。当然可以解决你的问题。

Answer 3

您只需要禁用文字选择。 jQuery可以做到这一点，它应该是跨浏览器：

$(".countButton").attr("unselectable", "on")
.on("selectstart", false)
.css("user-select", "none");