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

Question

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

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

任何帮助表示赞赏！

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

您可以使您的label / span元素contenteditable="true"并处理与听众的任何进一步操作。 将其设置为contenteditable将使普通的、类似输入的上下文菜单能够在右键单击时显示。

如果有人不关心 IE 支持：

pointer-events: none

Answer 5

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

document.oncontextmenu = reEnable

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

reEnable()
{
    return true;
}

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