jQuery.bind上下文菜单事件在两个元素之上叠加在彼此之上

Question

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

我遇到的问题是，当我单击上部div时，绑定事件将执行两次。我相信这是因为它们叠加在一起，并且divs都附加了绑定事件。

有没有办法只在被点击的div上执行一次绑定事件？基本上优先考虑最上面的（Z轴）div。

我有一个示例，您可以看到点击红色div时会显示attributeMenu上下文菜单，但是当您点击绿色div attributeMenu and 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>