javascript - 自定义右键菜单仅显示在div的子级上

http://jsfiddle.net/TnbYm/

我想让我的右键菜单仅显示在#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);
});

最佳答案

您可以为此使用CSS选择器：

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

Element.matches
Fiddle

关于javascript - 自定义右键菜单仅显示在div的子级上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24863359/