JavaScript中的SVG形状的鼠标右键检测无法正常工作 [英] Right mouse click detection on SVG shape in JavaScript not working
问题描述
我需要一些脚本来帮助我检测脚本中的人民币点击.
信息:最后，我想在专用的SVG形状上显示自己的右键菜单，该形状通过使用Raphael js lib进行显示，我发现网络上有很多不同的示例，甚至是非常简单的实现示例，例如使用jQuery-但我必须能够检测到是否单击了人民币或其他任何货币.
我尝试过以下和平的代码(但在人民币上没有成功):
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>
在IE中，仅检测到LMB(0)，在Chrome左侧(0)和middle(1)中，当我在body标签(如注释掉)中禁用它时，显示默认的上下文菜单，完全没有显示，但我仍然无法收到RMB(2)的警报，
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
推荐答案
看起来SVG元素不会触发"click"事件，而是会在右键单击时触发"contextmenu".我正在使用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:
.on("contextmenu", function(data, index) {
//handle right click
//stop showing browser menu
d3.event.preventDefault();
});
这篇关于JavaScript中的SVG形状的鼠标右键检测无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
