2012-05-09 11 views
11

Ho bisogno di rispondere quando un utente fa clic con il pulsante destro su un elemento creato con Rapahel.js. Ho letto che dovresti semplicemente collegare un gestore di eventi click e quindi decidere quale pulsante del mouse è stato fatto clic sull'utente. Non riesco a farlo funzionare.Ascolta rightclick su 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> 

La finestra di avviso verrà visualizzata solo quando si fa clic con il tasto sinistro del mouse. Qualche suggerimento su come mostrare la casella di avviso quando si fa clic sul pulsante giusto?

ho visto questo piccolo trucco con jQuery:

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

ma anche di leggere questo comment su di esso:

Sì, funziona anche, ma solo con jQuery, ed è anche meglio non usare mai .node, poiché Raphael a volte ricrea i nodi - quindi perdi il gestore di eventi.

risposta

11

È possibile utilizzare mousedown e verificare e.which. Questo funziona in FF e Chrome:

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

Per una soluzione cross browser si potrebbe desiderare di dare un'occhiata a e.button così:
http://www.quirksmode.org/js/events_properties.html#button

+0

Grazie. Le risposte sembrano così semplici quando le conosci :) – John