Обнаружение щелчка правой кнопкой мыши по фигуре SVG в JavaScript не работает - PullRequest
Новая
       0

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

11 голосов
/ 07 июля 2011


Мне нужна помощь с моим сценарием, в котором я хотел бы обнаружить щелчок RMB.
ИНФОРМАЦИЯ: наконец, я хочу отобразить свое собственное меню правой кнопки мыши на выделенной фигуре SVG, которая отображается сИспользуя Raphael js lib, я обнаружил, что в Интернете есть много разных примеров, даже очень простых для реализации, например, с помощью jQuery, - но я должен быть в состоянии обнаружить, щелкнул ли RMB или любой другой.
Я имеюпробовал (безуспешно на 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 left (0) и middle (1) и контекстное меню по умолчаниюотображается, когда я отключаю его внутри тега body (как закомментированный), контекстное меню вообще не отображается, но я все еще не могу получить предупреждение с помощью RMB (2),

спасибо за все подсказки /поддержка, Борис

Ответы [ 3 ]

28 голосов
/ 22 октября 2011

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

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

     //stop showing browser menu
     d3.event.preventDefault();
});
2 голосов
/ 13 октября 2015

Размещение ссылки на хорошее решение для контекстного меню d3 здесь.

Ссылка на Github: https://github.com/patorjk/d3-context-menu

Плункер: http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview ``

0 голосов
/ 29 января 2013

Следующий плагин контекстного меню jQuery работает с D3 и SVG: https://github.com/arnklint/jquery-contextMenu

...