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 に答える