问题用Raphael.js听取右击svg元素

当用户右键单击使用Rapahel.js创建的元素时，我需要做出响应。我读到你应该只附加一个click事件处理程序，然后决定用户点击哪个鼠标按钮。我不能让这个工作。

<!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');
        });

但也读过这个评论关于它：

是的，这也有效，但只有jQuery，最好不要使用.node，因为拉斐尔有时会重新创建节点 - 所以你失去了你的事件处理程序。

7299

2018-05-09 09:02

起源

答案:

您可以使用 mousedown 并测试 e.which。这适用于FF和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")
});

对于跨浏览器解决方案，您可能需要查看 e.button 以及：
http://www.quirksmode.org/js/events_properties.html#button

2018-05-09 12:43

谢谢。当你知道它们时答案看起来很简单:) - John

答案:

您可以使用 mousedown 并测试 e.which。这适用于FF和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")
});

对于跨浏览器解决方案，您可能需要查看 e.button 以及：
http://www.quirksmode.org/js/events_properties.html#button

2018-05-09 12:43

谢谢。当你知道它们时答案看起来很简单:) - John

问题 用Raphael.js听取右击svg元素

答案:

答案:

热门问题

问题用Raphael.js听取右击svg元素