Categorías: jQuery

Detectar el click derecho del ratón con jQuery

Nuevo post de jQuery para detectar el click derecho del ratón. Hasta ahora habíamos visto cómo detectar el click y doble click con el botón izquierdo del ratón y otra serie de eventos como:

Funciones de jQuery para detectar el click derecho

La función que vamos a usar es jQuery mousedown() para detectar la presión de un botón del ratón, luego con la ayuda de la función which() detectamos que botón en cuestión ha sido presionado.

Ejemplo para detectar el click derecho del ratón

Vamos a ver con este sencillo ejemplo cómo podemos detectar el click derecho:

$(document).ready(function(){
    $("#prueba1").mousedown(function(e){
     //1: izquierda, 2: medio/ruleta, 3: derecho
         if(e.which == 3) 
          {
              $('#mensaje1').text("has hecho click derecho");
          }
     });
});

Os explico el código:

  • Detectamos la presión de un botón del ratón en un elemento con id = ‘prueba1’.
  • Con which() controlamos el código del elemento presionado.
  • Si el código de botón presionado es el ‘3’ quiere decir que es click derecho.
  • El código ‘1’ sería click izquierdo, con el ‘2’ es el click central.
  • Terminamos sacando un mensaje por pantalla con jQuery text() en el elemento con id = ‘mensaje1’.

El código HTML del recuadro y el lugar donde sacamos el mensaje es el siguiente:

<p><span id="mensaje1">Haz click derecho en el recuadro</span></p>

<p><div id="prueba1" style="height:100px; width:250px; background-color:#C3C3C3; padding:50px 50px 50px 50px;"></div></p>

Otras funciones para detectar los eventos del ratón

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

compartir
Publicado por
Aner Barrena