上下文菜单，隐藏在某些区域

Question

在我的最后一个问题中，我想出了如何显示我自己的上下文菜单，其中包含链接，具体取决于您点击的 div（有关详细信息，请参阅）。

现在我遇到了问题，我不知道如何防止，在 div 上面我想显示上下文菜单，但上下文菜单没有显示。为了弄清楚我的问题， heres a fiddle.

所以在顶部区域，我根本不想让上下文菜单出现在 div 框中（看起来像这样：

    <div class="altContext">
    <a href="test.php?id=1">div1</a>
    <p>....<br/>......<br/></p>
</div>

), 我想显示我的自定义上下文菜单。

问题是，如果我不点击 div，就会找到下一个 class "altContext" 最近的 div。这是必需的，否则，当我右键单击时，某些 div 将不起作用。我使用该代码执行此操作：

if($(e.target).is('div'))
            var targetDiv = $(e.target).find('a');
        else
            var targetDiv = $(e.target).closest('div').find('a');

但是这就触发了问题，在顶部区域，其中的div用于右键单击。

是否有任何妥协，同时拥有两者：每个 div 的 individual 上下文菜单与 class "altContext" 和上面的东西，显示没有根本没有上下文菜单..?

Answer 1

DEMO

在您的代码中，您提供了 if(targetDiv != undefined)，但 var targetDiv = $(e.target).closest('div.altContext').find('a') 没有返回 undefined。所以我们需要检查对象的长度。还添加了 div.altContext 作为更精确的元素检查。

if($(e.target).is('div.altContext'))
    var targetDiv = $(e.target).find('a');
else
    var targetDiv = $(e.target).closest('div.altContext').find('a');
if( targetDiv.length != 0 ){
    var linkVal = window.location.protocol + "//" + window.location.host + "/" + targetDiv.attr('href');
    var link = $('<a>')
    .attr('href',linkVal)
    .text(linkVal);
    //console.log(link);
    $("#rkm").empty()
        .append(link)
        .css({
            "left": x + "px",
            "top": y + "px"
        })
        .show();
}

上下文菜单，隐藏在某些区域

Context Menu, hide in some areas

html

javascript

jquery

contextmenu