Question

我需要一些帮助我的脚本，我想检测人民币点击信息：最后我想在专用的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）中显示默认上下文菜单，当我在body标签内禁用它时（如注释掉的）上下文菜单根本没有显示，但我仍然无法通过RMB（2），

获得提醒

感谢您提供的所有提示/支持，鲍里斯塔拉

Answer 1

看起来SVG元素不会触发“click”事件，而是在右键单击时触发“contextmenu”。我正在使用d3.js绑定事件，所以这对我有用：

.on("contextmenu", function(data, index) {
     //handle right click

     //stop showing browser menu
     d3.event.preventDefault();
});

Answer 2

在此处发布指向d3上下文菜单的良好解决方案的链接。

Github链接：https://github.com/patorjk/d3-context-menu

Plunker：http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview ``

Answer 3

以下jQuery上下文菜单插件适用于D3和SVG：https://github.com/arnklint/jquery-contextMenu

JavaScript中的SVG形状上的鼠标右键单击检测不起作用

3 个答案: