Cuando haga doble clic en una página html la mayoría de los navegadores seleccione la palabra que usted haga doble clic en (o el párrafo que haga triple clic en). Hay una manera de deshacerse de este comportamiento?

Nota que no quiero deshabilitar regular de selección a través de un solo clic+arrastrar; es decir, jQuery UI del $('body').disableSelection() y la document.onselectstart de eventos DOM no son lo que yo quiero.

  • ¿Por qué quieres hacer esto?
  • No es mi decisión. El chico con el que estoy de codificación para lo quiere así. Probablemente porque la página es parte de un browsergame y algunos botones (divs con los eventos de clic) que aumentar/disminuir los valores de atraer a los usuarios a doubleclick ya que es más rápido que singleclicking de ellos muchas veces. Y si que selecciona el material es muy molesto y se ve raro.
  • stackoverflow.com/questions/880512/…
InformationsquelleAutor ThiefMaster | 2010-11-07

5 Comentarios

  1. 38

    Me temo que usted no puede evitar que la selección misma de ser de los «nativos» comportamiento del navegador, pero puede borrar la selección a la derecha después de haberla hecho:

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

    Editar: para prevenir también seleccionar todo el párrafo por «triple clic», aquí está el código necesario:

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

    Vivir de caso de prueba.

    Debe ser con todos los navegadores, por favor, informe de cualquier navegador donde no está funcionando.

    • Gracias, funciona bien. Aunque he utilizado una función anónima en vez de darle un nombre – no veo mucho sentido en el que, como es inmediatamente asignado y raro para ser utilizado en algún otro lugar.
    • Saludos, estoy de acuerdo con usted acerca de la función anónima, dando nombre a todo lo que se acaba de edad (mal?) el hábito de la mina. :/
    • pero es un hábito que ayuda a los depuradores saber el nombre de la función cuando usted está buscando en la pila, en lugar de ver a un montón de anónimos. FF es mucho mejor en adivinar los nombres de función, es decir, muestra anónimo para la mayoría de mis pilas
    • gracias, buen punto.. cuando tengo que depurar yo suelo usar las alertas, así que realmente no importa. 🙂
    • lo siento por traer este viejo post, pero este código no funciona el triple de clics, donde el navegador normalmente, se selecciona el párrafo. Alguna solución para eso?
    • atención a explicar lo que es triple clic? No es sólo hacer doble clic, a continuación, uno ordinario haga clic en? De todos modos, no hay eventos para tal cosa así que me temo que no se puede hacer mucho.
    • así, por ejemplo, cuando usted haga clic en una vez, se establece el foco en el texto, cuando se hace doble clic se selecciona la palabra, y cuando usted haga clic en 3 veces, se selecciona todo el párrafo. En mi caso, tengo un botón que se puede hacer clic varias veces dentro de un período corto de tiempo, y puesto que es sólo un botón, se selecciona el texto a su alrededor en cada uno de los terceros haga clic en, a continuación, cuando se hace clic de nuevo, la selección desaparece, y este proceso se repite como usuario mantiene clic en el botón. Alguna solución para esto?
    • Voy a ver ahora. Véase mi edición – no estoy seguro acerca de su botón, aunque, siéntase libre de actualizar mi violín de ejemplo para demostrar y voy a ver qué está pasando.
    • el punto culminante todavía «flashes» que mantenga clic sobre ella… no se preocupe, creo que se acaba de ir con ella 🙂 +1 por tu ayuda.
    • yep es debido a la naturaleza del código de trabajo sólo después de que la selección ya está hecha.
    • Para aquellos triple de clics que podrían setTimeout(ClearSelection, 25);. Dependiendo de lo rápido que sus usuarios suelen clic, usted podría tener que ajustar el tiempo de espera un poco.
    • gracias, muchas gracias por la edición también, lo escribí antes de saber acerca de las funciones anónimas y no se dio cuenta más tarde.
    • Todavía un ligero error con triple haga clic en (ff 15, Windows 7) – si hago doble clic, a continuación, haga clic una vez más, pero manteniendo el botón pulsado durante más de un segundo, el párrafo que se va a seleccionar …
    • buena captura! Error arrestado y fijo. Vio y se fija en Cromo, debe ser fijo para todos los navegadores, aunque, el uso bastante estándar de la solución de la adición de un indicador para comprobar el botón del ratón es liberado antes de borrar el documento de evento onclick. 🙂
    • Esto no sólo es lento, sino que también da una terrible experiencia de usuario. Muchos sitios también el abuso de este para evitar la copia de texto, en lugar de la prevención de selección azul puede hacer clic en los elementos. Downvoting para bien de la humanidad.
    • lo siento acerca de su terrible experiencia del usuario, pero usted debe culpar a los propietarios del sitio y/o los clientes insistir en estas características, no matar al mensajero.

  2. 9

    Sólo hay que poner esto en el css interesado sección

     -moz-user-select     : none;
     -khtml-user-select   : none;
     -webkit-user-select  : none;
     -o-user-select       : none;
     user-select          : none;
    • Por favor, lea la pregunta de nuevo: tenga en cuenta que no quiero deshabilitar regular de selección a través de un solo clic+arrastrar
    • esto parece funcionar perfecto . no doble . no triple . ninguna selección .. gracias
    • no seas dura conmigo 🙂 yo no sé inglés y estoy practicando. He cometido un error de lectura de la solicitud
    • Mientras no responder a la pregunta, era exactamente lo que estaba buscando, gracias.
  3. 5

    Las siguientes obras para mí en el actual de Chrome (v56), Firefox (v51) y MS Borde (v38) de los navegadores.

    JS:

    var test = document.getElementById('test');
    test.addEventListener('mousedown', function(e){
        if (e.detail > 1){
            e.preventDefault();
        }
    });

    HTML:

    <p id="test">This is a test area</p>

    La MouseEvent.detalle propiedad sigue la pista de la actual, haga clic en número que puede ser utilizado para determinar si el evento es un doble, triple, o haga clic en más.

    Internet explorer por desgracia no restablece el contador después de un período de tiempo de espera así que en lugar de obtener un recuento de las ráfagas de clics que obtener un recuento del número de veces que el usuario ha hecho clic desde la página se ha cargado.

    • No estoy seguro si esto de repente se hizo posible sólo recientemente, pero esta es la única respuesta que proporciona una solución perfecta.
  4. 4

    Si usted realmente desea deshabilitar de selección en la doble clic y no se acaba de quitar la selección a posteriori (se ve feo para mí), es necesario return false en el segundo evento mousedown (ondblclick no va a funcionar porque la selección se realiza onmousedown).

    **Si alguien quiere ninguna selección en todo, la mejor solución es utilizar CSS user-select : none; como Maurizio Battaghini propuesto.

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

    La demostración en vivo de aquí

    Aviso importante: me configurar la sensibilidad a 500ms pero haga Doble clic en la sensibilidad (el máximo de tiempo entre clics que se detecta como un doble clic) puede variar según el sistema operativo y el navegador, y a menudo es configurable por el usuario.api.jquery.com

    Probado en Chrome y IE11.

  5. -1

    Acaba de lanzar esta por ahí, pero aquí está el código bofetada en mis páginas donde me esperan los usuarios a hacer clic rápidamente. Sin embargo, esto también deshabilitar estándar clic y arrastra la selección de texto.

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

    Parece que funciona bien para mí.

Dejar respuesta

Please enter your comment!
Please enter your name here