javascript - 两个元素重叠的 jQuery.bind 上下文菜单事件

Question

我有两个彼此叠置的 div。我想要的是，当单击底部 div 时，会出现一个上下文菜单，而当我单击上部 div 时，我希望出现一个不同的上下文菜单。 div 需要保持在彼此之上。

我遇到的问题是，当我单击上面的 div 时，绑定(bind)事件会执行两次。我相信这是因为它们彼此重叠，并且两个 div 都附加了绑定(bind)事件。

有没有办法让绑定(bind)事件只在单击的 div 上执行一次？基本上优先考虑最上面的(Z 轴)div。

我有一个示例，您可以看到，当单击红色 div 时，会出现 attributeMenu 上下文菜单，但是当您单击绿色 div 时，会出现 attributeMenu 上下文菜单> attributeMenu 和 elementMenu 上下文菜单都会出现。

这里是示例 jsfiddle

部分代码:

addElementMenu();
addAttributeMenu();

// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {

    // If the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length > 0) {

        // Hide it
        $(".custom-menu").hide(100);
    }
});


// If the menu element is clicked
$(".custom-menu li").click(function () {

    // This is the triggered action name
    switch ($(this).attr("data-action")) {

        // A case for each action. Your actions here
        case "duplicate":
            duplicateItem(clicked);
            break;
        case "delete":
            deleteItem(clicked);
            break;
        case "copy":
            copyItem(clicked);
            break;
        case "cut":
            cutItem(clicked);
            break;
        case "paste":
            pasteItem();
            break;
    }

    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
});

function addElementMenu() {
    $('.element').bind("contextmenu", function (event) {

        // Avoid the real one
        event.preventDefault();

        //set clicked item
        clicked = $(this);
        parent = $(this).parent().attr('id');
        console.log(clicked);
        console.log(parent);
        // Show contextmenu
        $("#elementMenu").finish().show().css({
            top: event.pageY + "px",
            left: event.pageX + "px",
            display: 'block'
        });
    });
}

function addAttributeMenu() {
    $('.attribute').bind("contextmenu", function (event) {

        // Avoid the real one
        event.preventDefault();

        //set clicked item
        clicked = $(this);
        parent = $(this).parent().attr('id');
        console.log(clicked);
        console.log(parent);
        // Show contextmenu
        $("#attributeMenu").finish().show().css({
            top: event.pageY + "px",
            left: event.pageX + "px",
            display: 'block'
        });
    });
}

CSS:

.attribute {
    width: 400px;
    height: 200px;
    background-color: red;
}
.element {
    width: 200px;
    height: 100px;
    background-color: green;
}
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
}
.custom-menu li:hover {
    background-color: #DEF;
}

HTML:

<div class='attribute' id="attributeID">
    <div class='element' id="elementID"></div>
</div>
<ul class='custom-menu' id="elementMenu">
    <li class='visibleElement' data-action="duplicate">Duplicate</li>
    <li class='visibleElement' data-action="delete">Delete</li>
    <li class='visibleElement' data-action="copy">Copy</li>
    <li class='visibleElement' data-action="cut">Cut</li>
    <li class='visibleAttribute' data-action="paste">Paste</li>
</ul>
<ul class='custom-menu' id='attributeMenu'>
    <li class='visibleAttribute' data-action="paste">Paste</li>
</ul>

Answer 1

使用stopPropagation()，这样当您右键单击子级时就不会触发父级div中的事件。

脚本:

function addElementMenu() {
    $('.element').bind("contextmenu", function (event) {

        // Avoid the real one
        event.preventDefault();

        // Avoid the event from bubbling up to parent
        event.stopPropagation();

        //set clicked item
        clicked = $(this);
        parent = $(this).parent().attr('id');
        console.log(clicked);
        console.log(parent);
        // Show contextmenu
        $("#elementMenu").finish().show().css({
            top: event.pageY + "px",
            left: event.pageX + "px",
            display: 'block'
        });
    });
}

fiddle