javascript - 单击即可创建上下文菜单

Question

我正在尝试创建一个上下文菜单。当用户在 Canvas (HTML5)内单击时，应出现一个上下文菜单，并且单击菜单中的项目时，应调用一些函数。

有人可以帮助我吗？

Answer 1

请浏览这个 jsfiddle 链接，这可能会帮助您实现这一目标。 在此示例中，橙色区域是 Canvas ，如果右键单击它，它将显示上下文菜单。

function createCustomMenu()
{
     $(".box").unbind("click").bind("click", function (event) {
        // Avoid the real one
      event.preventDefault();

        $("#custom-menu").hide(100);
        // Show contextmenu
        if ($("#custom-menu").show() === true) {
            $("#custom-menu").hide(100)
            // In the right position (the mouse)
            css({
                top: event.pageY + "px",
                left: event.pageX + "px"
            });
        } else {
            $("#custom-menu").show(100).
            // In the right position (the mouse)
            css({
                top: event.pageY + "px",
                left: event.pageX + "px"
            });
        }            
    }); 
}

现在，如果用户取消选中该复选框，则上下文菜单将被禁用。如果用户选中，则只有它才会显示上下文菜单。所以我已经更新了此链接，也请参阅工作示例..

点击此链接查看 jsfiddle 示例:- http://jsfiddle.net/TnbYm/22/

用这个