2012-05-09 8 views
11

के साथ svg तत्व पर दाएं क्लिक को सुनें, जब मुझे उपयोगकर्ता Rapaphel.js के साथ बनाए गए तत्व पर राइट क्लिक करता है तो मुझे जवाब देना होगा। मैंने पढ़ा है कि आपको केवल एक क्लिक इवेंट हैंडलर संलग्न करना चाहिए और फिर यह तय करना चाहिए कि उपयोगकर्ता ने कौन सा माउस बटन क्लिक किया था। मैं इसे काम करने के लिए नहीं मिल सकता है।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> 

अलर्ट बॉक्स केवल माउस पर बाएं बटन पर क्लिक करते समय दिखाएगा। सही बटन पर क्लिक करते समय अलर्ट बॉक्स को दिखाने के तरीके के बारे में कोई सुझाव?

मैं jQuery के साथ इस छोटी सी चाल देखा है:

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

लेकिन यह भी इसके बारे में इस comment पढ़ें:

हाँ, वह भी काम करता है, लेकिन केवल jQuery के साथ, और यह भी बेहतर है कभी भी .node, का उपयोग न करें क्योंकि राफेल कभी-कभी नोड्स को फिर से बनाता है - इसलिए आप अपना ईवेंट हैंडलर खो देते हैं।

उत्तर

11

आप mousedown और e.which के लिए परीक्षण का उपयोग कर सकते हैं। यह एफएफ और क्रोम में काम करता है:

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

एक क्रॉस ब्राउज़र समाधान आप के रूप में अच्छी e.button पर एक नज़र लेने के लिए चाहते हो सकता है के लिए:
http://www.quirksmode.org/js/events_properties.html#button

+0

धन्यवाद। जब आप उन्हें जानते हैं तो जवाब बहुत आसान लगता है :) – John

संबंधित मुद्दे