2

我在 SVG 画布对象上实现上下文菜单：

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 并使用它和触发对象。当用户单击外部菜单时，它会被破坏。

我只有一个挑战。如果两个对象有上下文菜单，我首先右键单击，然后右键单击第二个，第一个上下文菜单应该消失，第二个 - 出现。但在我的情况下，调用 hide() 方法，第一个菜单被破坏，但画布没有收到右键单击事件，因此不会创建第二个菜单。

如何解决？

谢谢，鲍里斯。

4

1 回答 1

0

您可以在选择器中引用 SVG 元素，但只能使用它们的 id 而不是它们的类。

于 2013-12-12T18:54:43.853 回答