Pregunta

¿Cómo se hace esto?

¿Fue útil?

Solución

Esta es una buena pregunta, y yo realmente no creo que se puede hacer fácilmente. ( Algunos discusión sobre este )

Si es super chulo importante que tiene esta funcionalidad, se podía entrar ilegalmente en él de este modo:

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

Y aquí es un ejemplo de ello en el trabajo .

Como se señaló en los comentarios, hay un plugin para esto que hace lo que hice anterior más o menos, pero los paquetes para arriba para usted por lo que no tiene que ver lo feo: FixClick .

Otros consejos

Raymond Chen ha discutido algunas de las consecuencias para la de un solo frente -doble clic - a pesar de que está hablando en el contexto de las ventanas, lo que dice es relevante para el diseño de interfaz de usuario basada en navegador

.

Básicamente, las medidas adoptadas en un doble clic debe ser una cosa lógica a hacer después de un solo clic. Así, por ejemplo, en una interfaz de usuario de escritorio, solo clic selecciona un elemento y haga doble clic abre (por ejemplo, se abre el archivo, o lanza la aplicación). El usuario tendría que seleccionar el archivo para abrirlo de todos modos, por lo que no importa que la sola acción de clic se toma antes de la acción de doble clic.

Si usted tiene un componente de interfaz de usuario cuya acción de doble clic tiene relación alguna con la sola acción de clic, de manera que se hace necesario para evitar que la sola acción de clic que se produzcan una vez que el sistema se da cuenta de que en realidad era un doble clic, a continuación, que realmente debería a reconsiderar su diseño. Los usuarios encontrarán que torpe y contrario a la intuición, en el que no va a actuar de la manera en que se utilizan para cosas actuando.

Si aún desea ir por ese camino, entonces usted tendrá que utilizar la técnica de eliminación de rebotes (en cuyo caso se retrasará todas las acciones de clic individuales) o en su defecto implementar algún mecanismo mediante el cual el doble controlador de clic deshace el trabajo realizado por el solo controlador de clic.

También debe tener en cuenta que algunos usuarios puedan establecer un tiempo muy largo doble clic. Alguien con, por ejemplo, las manos artríticas podría tener un tiempo doble clic de más de un segundo conjunto en sus preferencias del sistema, por lo que la técnica de eliminación de rebotes basado en un cierto período de tiempo arbitrario de su elección se va a hacer su componente de interfaz de usuario inaccesible a esas personas si teniendo la sola acción de clic impide tomar la acción de doble clic. El "deshacer lo que acaba de ocurrir en un solo clic" técnica es la única solución viable para esto, por lo que yo sé.

La técnica descrita en las otras respuestas es conocido como eliminación de rebotes .

jQuery chispa proporciona una solución elegante para este limpia, mediante la implementación de un evento personalizado SingleClick. De esta manera, se puede usar como cualquier otro evento, por lo que:

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

También proporciona eventos personalizados para los primeros y últimos clics de una serie de clics. Y el evento personalizado lastclick pasa realmente por la cantidad de clics de vuelta! Por lo que podría hacer esto!

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

Puede encontrar el código fuente para definir el evento personalizado aquí .

Es de código abierto bajo la licencia AGPL, por lo que puede sentirse libre de tomar lo que necesita salir de ella sin preocupaciones! :-) También se desarrolló activamente en el día a día por lo que nunca se quedará sin el apoyo.

Pero lo más importante es que es un marco SECO Programas / Efecto a permitir desarrollar plugins y extensiones mucho más fácilmente. Así que espero que esto ayude a lograr ese objetivo!

Si se trata de un botón de enviar un formulario (que no es necesariamente el caso para el cartel original, pero puede ser el caso para otras personas que reciben aquí a través de Google), una opción más fácil sería desactivar el elemento que está siendo hecho clic en en su controlador de eventos click:

$(selector).click(function(e) {
    $(this).prop('disable', true);
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top