2010-11-20 25 views
160

Quiero bloquear los menús de contexto estándar y manejar el evento de clic derecho de forma manual.¿Cómo puedo capturar el evento de clic derecho en JavaScript?

¿Cómo se hace esto?

+8

@systempuntoout No, esta es una pregunta diferente. La otra pregunta quiere "bloquear el clic derecho sin usar javascript", esta pregunta simplemente quiere extenderlo con funcionalidad (muchos sitios lo hacen sin molestar a los usuarios con éxito, por ejemplo, Google docs) – bobobobo

+2

@Bobobobo: Eso es correcto. Mi objetivo es la extensión de la interfaz de usuario, no la restricción. – Giffyguy

+0

ctrl + clic o cmd + clic también son escenarios válidos para esto. A pesar de que está estrechamente unido al clic derecho, no parece ser un duplicado completo, ya que trata el menú contextual y no hace clic derecho. El clic derecho se incluye en el menú contextual, no al revés. –

Respuesta

234

uso caso oncontextmenu.

He aquí un correo jemplo:

<div oncontextmenu="javascript:alert('success!');return false;"> 
    Lorem Ipsum 
</div> 

Y utilizando detectores de eventos:

el.addEventListener('contextmenu', function(ev) { 
    ev.preventDefault(); 
    alert('success!'); 
    return false; 
}, false); 

No se olvide de volver falso, de lo contrario el menú contextual estándar todavía se abrirá.

Si va a utilizar una función que ha escrito en lugar de javascript:alert("Success!"), recuerde devolver falsa en AMBAS la función Y el atributo oncontextmenu.

+52

usando detectores de eventos: 'elt.addEventListener ('contextmenu', function (ev) {ev.preventDefault(); alert ('success!'); Return false;}, false); ' – rampion

+0

Gran código +1, encontré incluso una forma más delgada también. 'oncontextmenu = "chatMenu (evento)" luego simplemente use e.preventDefault (e) al pasarlo en chatMenu: D De esta manera,;; return false; no necesita ser pasado por cada nuevo elemento (por ejemplo, registros de chat o lo que sea) –

+5

Esto solo controlará el clic derecho. Si desea un controlador de eventos para todos los tipos de clics, utilice el código anterior junto con lo siguiente: 'var onMousedown = function (e) { if (e.which === 1) {/ * Left Mouse * /} else if (e.which === 3) {/ * Right Mouse * /} /*etc.*/ }; clickArea.addEventListener ("mousedown", onMousedown); 'El oyente contextmenu permitirá el paso del clic derecho a través del evento. Tenga en cuenta que en Mac FF * ctrl + clic derecho * aparecerá como un clic izquierdo del mouse, pero en Mac Chrome * ctrl + clic derecho * aparecerá con un clic derecho del mouse. –

21

pienso que usted está buscando algo como esto:

function rightclick() { 
    var rightclick; 
    var e = window.event; 
    if (e.which) rightclick = (e.which == 3); 
    else if (e.button) rightclick = (e.button == 2); 
    alert(rightclick); // true or false, you can trap right click here by if comparison 
} 

(http://www.quirksmode.org/js/events_properties.html)

y luego usar el onMouseDown incluso con el botón derecho del ratón() función (si desea utilizarlo a nivel mundial en página entera puede hacer esto <body onmousedown=rightclick(); >

+1

Creo que quería decir 'if ((e.which && e.which == 3) || (e.button && e.button == 2))'. – Shea

+4

o simplemente (e.which === 3 || e.button === 2) – ansiart

+0

que es la vieja escuela, pero funciona en casi todos lados. – nekavally

Cuestiones relacionadas