2012-05-09 17 views
11

Necesito responder cuando un usuario hace clic derecho en un elemento creado con Rapahel.js. Leí que solo debería adjuntar un controlador de evento de clic y luego decidir en qué botón del mouse hizo clic el usuario. No puedo hacer que esto funcione.Escuche el clic derecho en el elemento svg con Raphael.js

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://raphaeljs.com/raphael.js"></script> 
<script> 
    window.onload = function() { 
     var r = Raphael('demo', 640, 480); 
     r.rect(10, 10, 400, 400).attr({fill: 'red'}).click(function(){ 
      alert('test'); 
     });; 
    }; 
</script> 
</head> 
<body> 
    <div id="demo"></div> 
</body> 
</html> 

El cuadro de alerta solo se mostrará al hacer clic con el botón izquierdo del mouse. ¿Alguna sugerencia sobre cómo mostrar el cuadro de alerta al hacer clic en el botón derecho?

que he visto este pequeño truco con jQuery:

$(r.rect(10, 10, 400, 400).attr({fill: 'red'}).node).bind('contextmenu', function(){ 
      alert('test'); 
     }); 

Pero también leo este comment al respecto:

Sí, que también funciona, pero sólo con jQuery, y es también mejor no utilizar nunca .node, ya que Raphael a veces vuelve a crear nodos, por lo que pierde su controlador de eventos.

Respuesta

11

Puede usar mousedown y probar e.which. Esto funciona en Chrome y FF:

var r = Raphael('demo', 640, 480); 
r.rect(10, 10, 400, 400).attr({fill: 'red'}).mousedown(function(e){ 
    if (e.which == 3) 
     alert("hi") 
}); 

Para una solución de navegadores es posible que desee echar un vistazo a e.button así:
http://www.quirksmode.org/js/events_properties.html#button

+0

Gracias. Las respuestas parecen tan simples cuando las conoces :) – John

Cuestiones relacionadas