2

SVG キャンバス オブジェクトに contextmenu を実装しています。

onContextMenu:function (x, y) {
    $('#contextMenuBase').remove();
    $('#canvas').append('<div id="contextMenuBase"' +
        'style="position: absolute; height:1px; width:1px; left: ' + x + 'px; top: ' + y + 'px; "></div>');

    $.contextMenu({
        selector:'#contextMenuBase',
        events:{
            hide:function () {
                $('#contextMenuBase').remove();
                $.contextMenu('destroy');
            }
        },
        callback:$.proxy(function (key, options) {
            switch (key) {
                case "delete_figure":
                    this.setColor("ff0000");
                    break;
                case "delete_table":
                    this.setColor("00ff00");
                    break;
                default:
                    break;
            }
        }, this),
        x:0,
        y:0,
        items:{
            delete_figure:{name:"Delete Figure"},
            delete_table:{name:"Delete Table"}
        }
    });
}

SVG要素はセレクターで参照できないので、ポインターの位置に1ピクセルのdivを作成して使用し、オブジェクトをトリガーしました。ユーザーがメニューの外をクリックすると、破棄されました。

私の挑戦はただ一つ。2 つのオブジェクトにコンテキスト メニューがあり、最初に右クリックしてから 2 番目を右クリックすると、最初のコンテキスト メニューが消え、2 番目に表示されます。しかし、私の場合、hide() メソッドが呼び出され、最初のメニューが破棄されましたが、キャンバスは右クリック イベントを受信せず、その結果、2 番目のメニューが作成されません。

修正方法は？

ありがとう、ボリス。

4

1 に答える 1

0

セレクターで SVG 要素を参照できますが、クラスではなく ID のみを使用します。

于 2013-12-12T18:54:43.853 に答える