如何触发元素上的浏览器上下文菜单。 （就像用户右键单击一样）

Question

我需要通过 javascript 触发浏览器（IE、Firefox、Safari 等）上下文菜单的打开。 我试图解决的问题是，当右键单击重叠的元素时，其下方的元素会显示其上下文菜单。 因此，如果顶部元素是标签，当您右键单击时，我需要显示下面输入元素的上下文菜单。

我知道如何防止显示标签的上下文菜单，但我不知道如何任意打开上下文菜单。

任何帮助表示赞赏！

Answer 1

很抱歉给您带来不幸的消息，但这用 Javascript 是不可能做到的。

Answer 2

我不想让你感到沮丧，恰恰相反，特别是因为你回答了我自己的问题:)

我不认为浏览器的连接菜单可以通过网页上的普通脚本访问。

如果您所要求的实际上是可行的，那么浏览器制造商可能会认为这是一个错误并删除此行为。 跨浏览器，这种行为现在不太可能实现。

为什么不捕获鼠标事件，并且每当鼠标直接位于要显示其上下文菜单的元素下方的区域时，将覆盖元素推到下方，否则返回顶部？

这是我能想到的一种可能性，基本上根据鼠标位置来揭示/暴露隐藏元素。 就像在覆盖层上切一个洞一样。

或者为什么不使文本字段透明并将覆盖层完全放在文本字段下方？

如果这在技术上不起作用，那么至少您有针对目标浏览器提交错误或增强功能的意义。

顺便说一句，如果用户直接在插入符号的位置右键单击，上下文菜单似乎实际上可以工作，所以这可能是您需要考虑的另一个漏洞。

Answer 3

我有一个可能适合您需求的解决方案。 它还不完美，我只在几个浏览器（Fox 3.6、IE7、IE8、Chrome 4、xp 上的 Safari 3）中进行了一些快速测试，它需要调整和改进，但它是一个开始。 基本上，这个想法是删除右键单击 mousedown 时的标签，以便通过 mouseup 事件击中所需的字段，从而在相关字段上启动上下文菜单。

// Remove the contextmenu from "In-Field" Labels
base.$label.bind("contextmenu",function(e){
    return false;
}); 

// Detect right click on "In-Field" label:
// hide label on mousedown so mouseup will target the field underneath.
base.$label.mousedown(function(e){          
    if ( e.which == 3 ){
        var elLbl = $(this); 
        elLbl.hide();
        var elFid = $(this).attr("for");
        // bind blur event to replace the label when we are done.
        $("#" + elFid ).bind("blur.infieldlabel",function(){                    
            elLbl.show();
            $("#" + elFid ).unbind("blur.infieldlabel");                    
        });             
        return false;
    }
}); 

IE 和 Safari 浏览器遇到一个奇怪的问题，您需要单击进出两次才能再次显示标签（我认为与事件计时有关）。 通过查看代码，您也许可以轻松了解为什么会发生这种情况。 还注意到粘贴到字段后，狐狸有时会出现轻微的故障，在模糊时，标签会在不应该出现的情况下出现一瞬间。 如果您决定将此方法合并到您的代码中，那么纠正这应该是一件相当简单的事情。

Answer 4

在控制台中键入以下内容：

document.oncontextmenu = reEnable

这将在控制台上打印以下内容：

reEnable()
{
    return true;
}

完成，您现在可以使用上下文菜单。

Answer 5

您可以使您的 label/span 元素 contenteditable="true" 并使用侦听器处理任何进一步的操作。 使其contenteditable 将使正常的、类似输入的上下文菜单在右键单击时显示。

如果有人不关心 IE 支持：

pointer-events: none