Capturar click derecho con jquery

23142-21929 Jquery carece de una función que sea rightClick() [por ejemplo] es por ello que para acceder a este evento es necesario utilizar algunos trucos de programación. El motivo por el cual no existe esta función es muy sencillo, un click derecho no deja de ser un click al igual que el doble click no deja de ser dos clics seguidos.

Métodos para capturar ele evento click con jquery

Para capturar el click en jquery podríamos utilizar cualquiera de estas variantes:

$('div').bind('click', function(){
alert('clicked');
});
$('div').live('click', function(){
alert('clicked');
});
$('div').click(function(){
alert('clicked');
});



Diferenciar entre click derecho e izquierdo con jquery



Mientras que en cambio no existe el evento rightclick como os comentaba anteriormente. En cambio desde la versión 1.1.3 de jQuery event.which normaliza event.keyCode y event.charCode por lo que no tenemos que preocuparnos por problemas de compatibilidad del navegador, event.which dará 1, 2 o 3 para los botones del ratón a la izquierda, centro y derecha, respectivamente, así:




$('div').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
break;
case 2:
alert('Middle mouse button pressed');
break;
case 3:
alert('Right mouse button pressed');
break;
default:
alert('You have a strange mouse');
}
});



El siguiente código es otra variante para distinguir entre el click derecho e izquierdo de ratón sobre un elemento:




$('div').bind('click', function(e) {
if (e.button == 2) {
alert("Right click");
}
else {
alert("Some other click");
}
}



Capturar el evento del menú contextual con jquery y con él el botón derecho



La gran desventaja de estos dos métodos anteriores es que en muchos casos el click derecho está asociado a la aparición de un menú contextual, al aparecer este menú contextual se inhabilitan el resto de funciones. Para evitar esto lo mejor es en vez de capturar el click derecho capturar el evento del menú contextual y eliminarlo, esto lo podemos hacer de la siguiente manera:




$('div').bind('contextmenu', function(e) {
// evito que se ejecute el evento
e.preventDefault();
// conjunto de acciones a realizar
});



Con esta opción de capturar el evento contextmenu capturamos el click derecho del ratón en su evento final, de esta forma podemos programas funciones que se ejecutarán justo después de eliminar la aparición del menú contextual.



Nota: si el código anterior lo aplicamos al objeto document estaríamos eliminando el click derecho (nada recomendable) en nuestra web.

Comentarios