Javascript 启用禁用自定义右键单击菜单

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

有人能解释一下我做错了什么吗

非常感谢您的帮助

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 {

    }
});

---

像这样：工作演示=>

：）

您需要取消绑定上下文菜单：

如果我误解了什么，请告诉我，但这将满足您的需要

：）

代码

$(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");
    }
});

完整代码

$(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");
    }
});

---

我不知道有一个未绑定的事件处理程序。这会很方便的。穆丘gracias@mikethedj4很高兴它帮了我的忙。是的，真的很方便哟！