Question

我试图让我的右键菜单仅显示在#canvas的孩子身上。我还希望在没有点击子项时将其删除，但其中一个问题是因为在调用操作之前容器文档将其关闭，因此调用了文档。

如果有人能帮助我，我们将不胜感激。

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

// Menu's button actions
$("#custom-menu > button").click(function() {
    alert($(this).text() + "was clicked");
});
$("#custom-menu > button#duplicate").click(function() {
    // $('#canvas').append($(this).clone());
    $("#custom-menu").hide(100);
});
$("#custom-menu > button#remove").click(function() {
    // $(this).remove();
    $("#custom-menu").hide(100);
});
$("#custom-menu").find("button#deselect, button#close").click(function() {
    $("#custom-menu").hide(100);
});

Answer 1

您可以使用CSS选择器：

$(document).on('contextmenu', function (e) {
    if (e.target.matches('#canvas *')) 
        alert('Contexted!');
    else 
        alert('Not contexted!');
});

Element.matches
Fiddle

Answer 2

您好我已经更新了您提供的jsfiddle请详细说明.. 它的工作正常，你可以根据需要在点击方法中添加代码。

Link for jsfiddle:-  http://jsfiddle.net/TnbYm/14/

自定义右键菜单仅显示在div的子项上

2 个答案: