web-dev-qa-db-ja.com

JavaScript：ダブルクリックによるテキスト選択を無効にする

HTMLページをダブルクリックすると、ほとんどのブラウザは、ダブルクリックしたWord（またはトリプルクリックした段落）を選択します。この動作を取り除く方法はありますか？

シングルクリック+ドラッグによる通常の選択を無効にしたくないことに注意してください。つまり、jQuery UIの$('body').disableSelection()とdocument.onselectstart DOMイベントは私が望むものではありません。

javascriptjqueryhtmlselection
32
ThiefMaster

選択自体がブラウザーの「ネイティブ動作」であることを防ぐことはできないと思いますが、選択が行われた直後に選択をクリアできます。

<script type="text/javascript">
document.ondblclick = function(evt) {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}
</script>

Edit：「トリプルクリック」による段落全体の選択を防ぐためにも、必要なコードは次のとおりです。

var _tripleClickTimer = 0;
var _mouseDown = false;

document.onmousedown = function() {
    _mouseDown = true;
};

document.onmouseup = function() {
    _mouseDown = false;
};

document.ondblclick = function DoubleClick(evt) {
    ClearSelection();
    window.clearTimeout(_tripleClickTimer);

    //handle triple click selecting whole paragraph
    document.onclick = function() {
        ClearSelection();
    };

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
};

function RemoveDocumentClick() {
    if (!_mouseDown) {
        document.onclick = null; 
        return true;
    }

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
    return false;
}

function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}​

ライブテストケース 。

クロスブラウザである必要があります。動作していないブラウザを報告してください。

38
Shadow Wizard

これをCSSの興味のあるセクションに置くだけです

 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;
9
Maurizio Battaghini

以下は、現在のChrome（v56）、Firefox（v51）、およびMS Edge（v38）ブラウザーで動作します。

var test = document.getElementById('test');
test.addEventListener('mousedown', function(e){
    if (e.detail > 1){
        e.preventDefault();
    }
});
<p id="test">This is a test area</p>

MouseEvent.detail プロパティは 現在のクリック数 を追跡します。これは、イベントがダブルクリック、トリプルクリック、またはそれ以上のクリックかどうかを判断するために使用できます。

残念ながら、Internet Explorerはタイムアウト期間後にカウンターをリセットしません。そのため、バーストクリック数を取得する代わりに、ページが読み込まれてからユーザーがクリックした回数を取得します。

5
kicken

ダブルクリックで選択を本当に無効にし、後で選択を削除するだけではない場合（私には醜く見えます）、return false 2番目のmousedownイベントで（選択はonmousedownで行われるため、ondblclickは機能しません）。

**誰かが何も選択したくない場合、最善の解決策はCSSを使用することですuser-select : none; Maurizio Battaghiniが提案したように。

// set to true if you want to disable also the triple click event
// works in Chrome, always disabled in IE11
var disable_triple_click = true;

// set a global var to save the timestamp of the last mousedown
var down = new Date().getTime();
var old_down = down;

jQuery(document).ready(function($)
{
    $('#demo').on('mousedown', function(e)
    {
        var time = new Date().getTime();

        if((time - down) < 500 && 
        (disable_triple_click || (down - old_down) > 500))
        {
            old_down = down;
            down = time;

            e.preventDefault(); // just in case
            return false; // mandatory
        }

        old_down = down;
        down = time;
    });
});

ここでライブデモ

重要なお知らせ：感度を500msに設定しましたが、ダブルクリックの感度（ダブルとして検出されるクリック間の最大時間）クリック）は、オペレーティングシステムとブラウザによって異なる場合があり、多くの場合、ユーザーが構成できます。- api.jquery.com

ChromeおよびIE11でテスト済み。

4
pmrotule