JavaScript 中 SVG 形状的鼠标右键单击检测不起作用
我的脚本需要一些帮助，我想在其中检测人民币点击。
信息：最后我想在专用的 SVG 形状上显示我自己的右键菜单，该菜单是使用 Raphael js lib 显示的，我发现网络上有很多不同的示例，甚至是非常简单的实现示例，例如使用 jQuery - 但我必须能够检测人民币是否被点击或任何其他。
我尝试过（在人民币上没有成功）以下和平代码：
<html>
<head>
<script type="text/javascript" src="raphael.js"></script>
<script>
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 300, 300);
var shape = paper.path('m150,150l40,0l0,20l-40,0l0,-20z');
var fill=shape.attr({fill:'#FFFFFF'});
fill.click(function (evt){
if(evt.button == 2) {
// right mouse button pressed
evt.preventDefault();
}
alert("Pressed mouse = " + evt.button.toString());
});
}
</script>
</head>
<!-- <BODY oncontextmenu="return false"> -->
<body>
<div id="canvas_container"></div>
</body>
</html>
在 IE 中仅检测到 LMB(0)，在 Chrome 中检测到左侧（0）和中间（1），并且当我禁用它时显示默认上下文菜单正文标签内（如注释掉的）上下文菜单根本不显示，但我仍然无法收到人民币（2）的警报，
感谢您的所有提示/支持， 鲍里斯
I need some help with my script in which I would like to detect RMB click.
INFO: finally I want to display my own right-click menu on a dedicated SVG shape, which is displayed with a use of Raphael js lib, I found out that there are many different examples on web, even very simple ones to implement, like with jQuery - but I have to be able to detect wether RMB was clicked or any other.
I have tried (without success on RMB) a following peace of code:
<html>
<head>
<script type="text/javascript" src="raphael.js"></script>
<script>
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 300, 300);
var shape = paper.path('m150,150l40,0l0,20l-40,0l0,-20z');
var fill=shape.attr({fill:'#FFFFFF'});
fill.click(function (evt){
if(evt.button == 2) {
// right mouse button pressed
evt.preventDefault();
}
alert("Pressed mouse = " + evt.button.toString());
});
}
</script>
</head>
<!-- <BODY oncontextmenu="return false"> -->
<body>
<div id="canvas_container"></div>
</body>
</html>
in IE only LMB(0) is detected, in Chrome left(0) and middle(1) and default context menu is displayed, when I disable it inside body tag (as commented-out) context menu is not displayed at all, but I still cannot get the alert with RMB(2),
thank you for all the hints/support,
Borys
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
看起来 SVG 元素不会触发“单击”事件，而是在右键单击时触发“上下文菜单”。我正在使用 d3.js 绑定事件，所以这对我有用：
Looks like SVG elements do not fire the "click" event instead they fire "contextmenu" on right click. I am using d3.js to bind the events, so this worked for me:
在此处发布 d3 contextmenu 的良好解决方案的链接。
Github 链接： https://github.com/patorjk/d3-context-menu
：http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview
``
Posting the link to a good solution for d3 contextmenu here.
Github link : https://github.com/patorjk/d3-context-menu
Plunker : http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview
``
以下 jQuery 上下文菜单插件适用于 D3 和 SVG： https://github.com/arnklint/jquery-contextMenu
The following jQuery context menu plugin works with D3 and SVG: https://github.com/arnklint/jquery-contextMenu