Прямое обнаружение щелчка мыши по форме SVG в JavaScript не работает


Мне нужна помощь с моим script, в котором я хотел бы найти RMB-клик.
INFO: наконец, я хочу отобразить собственное меню правой кнопки мыши по выделенной форме SVG, которое отображается с использованием Raphael js lib, я обнаружил, что на веб-сайте существует множество разных примеров, даже очень простых для реализации, например с jQuery - но я должен быть в состоянии обнаружить, что на него нажимали RMB или любой другой.
Я пробовал (без успеха на юанях) следующий мир кода:

<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),

Благодарим вас за все подсказки/поддержку, Borys

Ответы

Ответ 1

Похоже, что элементы SVG не запускают событие "click", вместо этого они запускают "контекстное меню" при щелчке правой кнопкой мыши. Я использую d3.js для привязки событий, поэтому это сработало для меня:

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

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