Слушайте rightclick на элементе svg с Raphael.js

Мне нужно ответить, когда пользователь щелкает правой кнопкой мыши на элемент, созданный с помощью Rapahel.js. Я прочитал, что вам нужно просто прикрепить обработчик события клика, а затем решить, какую кнопку мыши нажать на кнопку. Я не могу заставить это работать.

<!DOCTYPE html>
<html>
<head>
<script src="http://raphaeljs.com/raphael.js"></script>
<script>
    window.onload = function() {
       var r = Raphael('demo', 640, 480);
       r.rect(10, 10, 400, 400).attr({fill: 'red'}).click(function(){
          alert('test');
       });;
    };
</script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

Предупреждающее окно будет отображаться только при нажатии левой кнопки мыши. Любые предложения о том, как показывать окно предупреждения при нажатии правой кнопки?

Я видел этот маленький трюк с jQuery:

$(r.rect(10, 10, 400, 400).attr({fill: 'red'}).node).bind('contextmenu', function(){
            alert('test');
        });

Но также прочитайте этот комментарий об этом:

Да, это тоже работает, но только с jQuery, а также лучше никогда не использовать .node, поскольку Raphael иногда воссоздает узлы - поэтому вы теряете обработчик событий.

Ответ 1

Вы можете использовать mousedown и проверить e.which. Это работает в FF и Chrome:

var r = Raphael('demo', 640, 480);
r.rect(10, 10, 400, 400).attr({fill: 'red'}).mousedown(function(e){
    if (e.which == 3)
        alert("hi")
});

Для решения кросс-браузера вы можете также взглянуть на e.button:
http://www.quirksmode.org/js/events_properties.html#button