2

可能重复：
在 javascript 中单击其包含的 div 时防止突出显示文本的最佳方法是什么？

我正在用文本按钮（div）构建我自己的简单+计数器-。我有它在另一个 div 上执行 .focus() 的位置，.countDisplay它应该将焦点从计数按钮上移开。最好的例子： http: //jsbin.com/uxewej/2/edit如果你+连续点击按钮几次，它有时看起来像这样：

在此处输入图像描述

如果用户连续单击任一按钮，是否有办法防止文本被选择/突出显示？谢谢！

4

3 回答 3

2

您可以使用 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

如果您想禁用对选定元素的选择，请点击此链接

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);
于 2013-02-01T20:42:02.977 回答
1

我个人会使用按钮标签而不是跨度，它在语义上更有意义，并且在这种情况下也能更好地工作。当然可以解决您的问题。

于 2013-02-01T20:43:21.073 回答
1

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

$(".countButton").attr("unselectable", "on")
.on("selectstart", false)
.css("user-select", "none");
于 2013-02-01T20:44:23.800 回答