2012-05-09 43 views
11

Tôi cần trả lời khi người dùng nhấp chuột phải vào một yếu tố được tạo bằng Rapahel.js. Tôi đọc rằng bạn chỉ nên đính kèm một trình xử lý sự kiện nhấp chuột và sau đó quyết định nút chuột nào người dùng đã nhấp. Tôi không thể làm việc này được.Nghe nhấp chuột phải vào phần tử svg bằng 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> 

Hộp cảnh báo sẽ chỉ hiển thị khi nhấp vào nút bên trái trên chuột. Bất kỳ đề xuất nào về cách hiển thị hộp cảnh báo khi nhấp vào nút bên phải?

Tôi đã nhìn thấy thủ thuật này ít với jQuery:

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

Nhưng cũng đọc comment về nó:

Vâng, đó là công trình quá, nhưng chỉ với jQuery, và nó cũng tốt hơn không bao giờ sử dụng .node, vì Raphael đôi khi tạo lại các nút - vì vậy bạn mất trình xử lý sự kiện của mình.

Trả lời

11

Bạn có thể sử dụng mousedown và kiểm tra e.which. Này hoạt động trong Chrome FF và:

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

Đối với một giải pháp trình duyệt chéo bạn có thể muốn có một cái nhìn tại e.button cũng như:
http://www.quirksmode.org/js/events_properties.html#button

+0

Cảm ơn bạn. Các câu trả lời có vẻ rất đơn giản khi bạn biết chúng :) – John

Các vấn đề liên quan