JavaScript: désactiver la sélection de texte via doubleclick

Question

JavaScript: désactiver la sélection de texte via doubleclick

Lorsque vous double-cliquez sur une page html, la plupart des navigateurs sélectionnent le mot sur lequel vous double-cliquez (ou le paragraphe sur lequel vous Triple-cliquez). Est-il un moyen de se débarrasser de ce problème?

Notez que je ne veux pas désactiver la sélection régulière via un seul clic + glisser; c'est-à-dire $('body').disableSelection() de l'interface utilisateur jQuery et L'événement document.onselectstart DOM ne sont pas ce que je veux.

30

html javascript jquery selection

demandé sur iconoclast 2010-11-07 14:20:00

5 réponses

score 38 · Answer 1

Je crains que vous ne puissiez pas empêcher la sélection elle-même d'être "comportement natif" du navigateur, mais vous pouvez effacer la sélection juste après qu'elle soit faite:

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

Edit : pour éviter également de sélectionner un paragraphe entier par "triple clic", voici le code requis:

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();
}

Cas de test en direct .

Devrait être cross browser, veuillez signaler tout navigateur où il ne fonctionne pas.

score 9 · Answer 2

Il suffit de mettre ceci sur la section intéressée css

 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;

score 4 · Answer 3

Si vous voulez vraiment désactiver la sélection en double-cliquant et ne pas simplement supprimer la sélection Après (cela me semble moche), vous devez return false dans le deuxième événement mousedown (ondblclick ne fonctionnera pas car la sélection est faite onmousedown).

* * Si quelqu'un ne veut pas de sélection du tout, la meilleure solution est d'utiliser CSS user-select : none; comme Maurizio Battaghini proposé.

// 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;
    });
});

Démonstration en Direct ici

Avis Important: je régler la sensibilité à 500 ms mais la sensibilité du Double-clic (temps maximum entre les clics détecté en double-clic) peut varier selon le système d'exploitation et le navigateur, et est souvent configurable par l'utilisateur. - api.jquery.com

Testé dans Chrome et IE11.

score 3 · Answer 4

Ce qui suit fonctionne pour moi dans les navigateurs actuels Chrome (v56), Firefox (V51) et 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>

Le MouseEvent.la propriété detail conserve la trace du nombre de clics en cours {[8] } qui peut être utilisé pour déterminer si l'événement est un clic double, tripple ou plus.

Internet explorer ne réinitialise malheureusement pas le compteur après un délai d'attente, donc au lieu d'obtenir un nombre de clics en rafale, vous obtenez un nombre de combien fois que l'Utilisateur a cliqué depuis le chargement de la page.

score -1 · Answer 5

Juste pour jeter cela là-bas, Mais voici le code que je tape dans mes pages où je m'attends à ce que les utilisateurs cliquent rapidement. Cependant, cela désactivera également la sélection de texte click-n-drag standard.

document.body.onselectstart = function() {
    return false;
}
document.body.style.MozUserSelect = "none";
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
    document.body.onmousedown = function() {
        return false;
    }
}

Semble bien fonctionner pour moi.

Las etiquetas más populares

JavaScript: désactiver la sélection de texte via doubleclick

5 réponses