JavaScript 中 SVG 形状上的鼠标右键单击检测不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6605978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right mouse click detection on SVG shape in JavaScript not working
提问by Borys
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:
我需要一些关于我想检测人民币点击的脚本的帮助。
信息：最后我想在一个专用的 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>
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),
在 IE 中只检测到 LMB(0)，在 Chrome left(0) 和 middle(1) 中显示默认上下文菜单，当我在 body 标签中禁用它时（如注释掉）上下文菜单根本不显示，但是用RMB(2)还是收不到警报，
thank you for all the hints/support, Borys
感谢您的所有提示/支持，Borys
回答by Phil McCullick
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:
看起来 SVG 元素不会触发“click”事件，而是在右键单击时触发“contextmenu”。我使用 d3.js 绑定事件，所以这对我有用：
.on("contextmenu", function(data, index) {
//handle right click
//stop showing browser menu
d3.event.preventDefault();
});
回答by Aparna
Posting the link to a good solution for d3 contextmenu here.
在此处发布指向 d3 上下文菜单的良好解决方案的链接。
Github link : https://github.com/patorjk/d3-context-menu
Github 链接：https: //github.com/patorjk/d3-context-menu
Plunker : http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview``
Plunker : http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview``
回答by user1580492
The following jQuery context menu plugin works with D3 and SVG: https://github.com/arnklint/jquery-contextMenu
以下 jQuery 上下文菜单插件适用于 D3 和 SVG：https: //github.com/arnklint/jquery-contextMenu
