Cómo diferenciar entre un evento por usuario o programático

By clcanela, 11 July, 2017
Titulo en Hero

Es posible diferenciar un evento que ha sido lanzado por una acción directa de un usuario (digamos un clic) y otro evento cuyo trigger (ejecución) fue invocado mediante código programáticamente a raíz de otra interacción. Esto puede servir, por ejemplo, si queremos realizar una acción cuando el usuario haga scroll a nuestra página pero no cuándo se deslice gracias a una ancla o navegación alterna. En el siguiente código en jQuery podemos conocer el origen del evento gracias al objeto que recibe toda función ejecutada por un listener. Este objeto contiene toda la información del evento, pero en específico nos interesa el atributo originalEvent que tiene los detalles de la acción que ejecutó la acción de nuestro evento, si éste atributo no existe o es nulo, quiere decir que la ejecución no fue por evento si no por invocación por código.

$( '#miElemento' ).on('click', function ( e ) {
    if ( e.originalEvent === undefined ) {
        alert( 'invocado programáticamente' );
    } else {
        alert( 'Invocado directo por usuario' );
    }
})

En el código anterior, se asigna al elemento #miElemento un listener para el evento click y como único parámetro se recive una variable (en este caso llamamos e pero es indistinto el nombre de la misma mientras sea el primer parámetro que recibe la declaración de la función). La única validación necesaria para conocer si el evento se realizó de forma manual (por acción directa de un usuario) o por invocación desde código (digamos, ejecutando $("#miElemento").click() ) es revisando que la propiedad originalEvent no sea undefined

Puedes probarlo en el siguiente fiddle

Comments

Powered by Drupal