javascript - 启用禁用自定义右键菜单

Question

http://jsfiddle.net/CmJ9z/

我有一个复选框，如果选中它，我想要一个自定义右键单击菜单，但如果它没有默认浏览器的上下文菜单。然而，一旦取消选中，自定义菜单仍然会弹出，一旦再次选中，它就会显示/隐藏/显示。

有人可以帮我解释一下我做错了什么吗？

非常感谢任何帮助。

if ( $("#tm").prop('checked') === true ) {
    // Trigger action when the contexmenu is about to be shown
    $(document).bind("contextmenu", function (event) {
        // Avoid the real one
        event.preventDefault();
        $("#custom-menu").hide(100);
        // Show contextmenu
        if ($("#showcustom-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"
            });
        }
    });

    // If the document is clicked somewhere
    $(document).bind("mousedown", function () {
        $("#custom-menu").hide(100);
    });

    $("#custom-menu li").click(function(){
        // This is the triggered action name
        switch($(this).attr("data-action")) {
                // A case for each action. Should personalize to your actions
            case "duplicate": alert("duplicate called"); break;
            case "remove": alert("remove called"); break;
            case "deselect": alert("deselect called"); break;
        }
    });
} else {

}
$("#tm").on('change', function() {
    if ( $(this).prop('checked') === true ) {
        // Trigger action when the contexmenu is about to be shown
        $(document).bind("contextmenu", 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"
                });
            }
        });

        // If the document is clicked somewhere
        $(document).bind("mousedown", function () {
            $("#custom-menu").hide(100);
        });

        $("#custom-menu li").click(function(){
            // This is the triggered action name
            switch($(this).attr("data-action")) {
                    // A case for each action. Should personalize to your actions
                case "duplicate": alert("duplicate called"); break;
                case "remove": alert("remove called"); break;
                case "deselect": alert("deselect called"); break;
            }
        });
    } else {

    }
});

Answer 1

像这样:工作演示 => http://jsfiddle.net/vLtgk/ :)

您需要取消绑定(bind)上下文菜单:

• http://api.jquery.com/unbind/

请让我知道我是否误解了什么，但这将满足您的需求:)

代码

$(document).unbind("contextmenu");

完整代码

if ( $("#tm").prop('checked') === true ) {
    // Trigger action when the contexmenu is about to be shown
    $(document).bind("contextmenu", function (event) {
        // Avoid the real one
        event.preventDefault();
        $("#custom-menu").hide(100);
        // Show contextmenu
        if ($("#showcustom-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"
            });
        }
    });

    // If the document is clicked somewhere
    $(document).bind("mousedown", function () {
        $("#custom-menu").hide(100);
    });

    $("#custom-menu li").click(function(){
        // This is the triggered action name
        switch($(this).attr("data-action")) {
                // A case for each action. Should personalize to your actions
            case "duplicate": alert("duplicate called"); break;
            case "remove": alert("remove called"); break;
            case "deselect": alert("deselect called"); break;
        }
    });
} else {
    $(document).unbind("contextmenu");
}
$("#tm").on('change', function() {
    if ( $(this).prop('checked') === true ) {
        // Trigger action when the contexmenu is about to be shown
        $(document).bind("contextmenu", 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"
                });
            }
        });

        // If the document is clicked somewhere
        $(document).bind("mousedown", function () {
            $("#custom-menu").hide(100);
        });

        $("#custom-menu li").click(function(){
            // This is the triggered action name
            switch($(this).attr("data-action")) {
                    // A case for each action. Should personalize to your actions
                case "duplicate": alert("duplicate called"); break;
                case "remove": alert("remove called"); break;
                case "deselect": alert("deselect called"); break;
            }
        });
    } else {
        $(document).unbind("contextmenu");
    }
});