javascript - 仅当我右键单击表格行时加载 div - 上下文菜单

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果。另请参阅:Stack Overflow question checklist

已关闭10 年前。

Improve this question

我想在右键单击表格行时显示上下文菜单，并且我想阻止右键单击除表格行之外的所有页面。我想通过 jQuery 加载上下文菜单。

这是我的上下文菜单 div:

<div class="xContextMenu">
    <ul>
        <li><a href="javascript:;" class="next-chat">Accept Next Chat</a></li>
        <li><a href="javascript:;" class="next-response">Next Response</a></li>
        <li><a href="javascript:;" class="accept-chat">Accept Chat</a></li>
        <li><a href="javascript:;" class="refuse-chat">Refuse Chat</a></li>
        <li class="xDividerMenu">
            <img src="/live-person/web-area/assets/img/xContextDivider.png" alt="" />
        </li>
        <li><a href="javascript:;" class="invite-chat">Invite Chat</a></li>
        <li><a href="javascript:;">Engage</a></li>
        <li><a href="javascript:;">Block For Chat</a></li>
        <li><a href="javascript:;">Send Private Message</a></li>
        <li><a href="javascript:;">Chat Actions</a></li>
        <li class="xDividerMenu">
            <img src="/live-person/web-area/assets/img/xContextDivider.png" alt="" />
        </li>
        <li><a href="javascript:;" class="chat-history">Chat History</a></li>
        <li><a href="javascript:;">All Sessions history</a></li>
        <li><a href="javascript:;">Capture Visitor</a></li>
        <li class="xDividerMenu">
            <img src="/live-person/web-area/assets/img/xContextDivider.png" alt="" />
        </li>
        <li><a href="javascript:;">Suggest Content</a></li>
        <li class="xDividerMenu">
            <img src="/live-person/web-area/assets/img/xContextDivider.png" alt="" />
        </li>
        <li><a href="javascript:;">Cobrowser</a></li>
    </ul>
</div>

Answer 1

这是一个可行的选择:

FIDDLE

$(document).on('contextmenu', function(e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(e.target).is('li')) {
        $('#contextmenu').css({
            top:e.pageY + 'px',
            left:e.pageX + 'px'
        }).show();
    }
    return false;
});

$(document).on('click', function(e) {
   if (!$(e.target).is('#contextmenu')) $('#contextmenu').hide();
});