如何使用JavaScript打开锚上下文菜单？

我正在尝试仅使用JavaScript打开锚上下文菜单，例如用于此HTML：

我想只使用JavaScript打开带有本机“在链接新选项卡中打开”和“在新窗口中打开链接”选项的上下文菜单

到目前为止，我已经尝试过了，它似乎成功地将

contextmenu

事件发送到锚，但是上下文菜单实际上没有显示

document.getElementById（'anchor-el'）.dispatchEvent（新的MouseeEvent（'contextmenu'，{bubbles:true}））

打开本机系统上下文菜单，例如。G无法使用默认的右键单击上下文菜单。
当然，您可以使用jQuery创建自己的上下文菜单，例如：

作为如何使用库的示例：

$（函数（）{
$.contextMenu({
选择器：“#示例”，
触发器：“左”，
回调：函数（键、选项）{
var m=“单击：”+键；
window.console&&console.log（m）| | alert（m）；
},
项目：{
“编辑”：{名称：“编辑”，图标：“编辑”}，
“切割”：{名称：“切割”，图标：“切割”}，
复制：{名称：“复制”，图标：“复制”}，
“粘贴”：{名称：“粘贴”，图标：“粘贴”}，
“删除”：{名称：“删除”，图标：“删除”}，
“sep1”：“-----------”，
“退出”：{name:“退出”，图标：function（）{
返回“上下文菜单图标上下文菜单图标退出”；
}}
}
});
/*防止默认切换到目标站点*/
$（“#示例”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
});
});


我相信它会对您有所帮助。
根据我对您问题的理解，您希望用
上下文菜单
结果“替换”正常的
单击
事件结果。。。
但只有上下文菜单的前两项

这使它成为您必须定义的自定义菜单。
所以这里有一些东西


let contextElements=document.querySelectorAll（“.context-anchor”）
让myContext=document.querySelector（“.context”）
让contextItems=document.querySelectorAll（“.context项”）
让contextHref
//在每个.context锚元素上添加事件侦听器以显示“模拟上下文菜单”
contextElements.forEach（函数（ce）{
ce.addEventListener（“点击”，函数（e）{
e、 预防默认值（）
//获取单击坐标以在正确位置打开关联菜单
让我们单击Coords={x:e.pageX，y:e.pageY}
//获取所单击链接的href
contextHref=ce.href
//创建鼠标事件
让event=document.createEvent（'MouseEvents'）；
initEvent（'mycontextmenu'，false，true）；
//准备好了吗
此.addEventListener（'mycontextmenu'，函数（e）{
myContext.style.top=clickCoords.y
myContext.style.left=clickCoords.x
myContext.style.display=“block”
}，假）；
//发送它
本次调度事件（事件）；
})
})
//“模拟上下文菜单”选项的侦听器
contextItems.forEach（函数（ci）{
ci.addEventListener（“单击”，函数（e）{
if（this.getAttribute（“数据目的地”）=“选项卡”）{
window.open（contextHref，“\u blank”）
}否则{
window.open（contextHref，“custom”，`width=${0.99*screen.width}，height=${0.94*screen.height}`）
}
})
})
//在.context锚元素以外的任何位置单击时隐藏“模拟上下文菜单”
文档.添加的列表器（“单击”，函数（e）{
如果（myContext.style.display==“block”&&e.target.classList.toString（）.split（“”.indexOf（“上下文锚”）如果我理解正确，您必须创建一个自定义的
上下文菜单
。下面是一个示例


const menu=document.querySelector（“[data id=anchor el]”）
const-anchor=document.getElementById（'anchor-el'）；
addEventListener（'contextmenu'，e=>{
e、 预防默认值（）；
menu.style.top=e.pageX；
menu.style.top=e.pageY；
menu.style.display='block'；
});
menu.querySelector（'li#newTab'）。addEventListener（'click'，（evt）=>{
evt.preventDefault（）；
log（'在新选项卡中单击打开'）；
window.open（anchor.href）；
});
menu.querySelector（'li#newWin'）。addEventListener（'click'，（evt）=>{
evt.preventDefault（）；
log（'在新窗口中单击打开'）；
打开（anchor.href，“_blank”，“toolbar=0，location=0，menubar=0”）；
});
document.body.addEventListener（'单击'，（evt）=>{
evt.preventDefault（）；
evt.stopPropagation（）；
menu.style.display='none'；
})；
[data id=“anchor el”]{
宽度：15雷姆；
显示器：flex；
保证金：0；
填充：0；
对齐项目：拉伸；
内容对齐：间距均匀；
弯曲方向：立柱；
对正内容：空间均匀；
盒子阴影：0.25雷姆0.325雷姆0.175雷姆rgba（0,0,0,0.2）；
位置：相对位置；
显示：无；
}
[data id=“anchor el”]ul li{
宽度：100%；
列表样式：无；
保证金：0；
填充：0.5雷姆；
位置：相对位置；
颜色：#000；
字号：500；
字号：1rem；
光标：指针；
}
[data id=“anchor el”]ul li:悬停{
颜色：#f00；
}


在新选项卡中打开
在新窗口中打开

如果要在菜单中使用“在新选项卡中打开”和“在新窗口中打开”选项，为什么只使用HTML



这篇文章的顶部答案似乎为您指出了正确的方向-这是我迄今为止找到的最有用的答案。从我所能看出，打开本机浏览器上下文菜单是不可能的，因此打开自定义上下文菜单似乎是唯一的选项。（出于好奇，我需要一个div，它不能是锚，但里面有一个锚，接收点击事件。我想“forwar”
document.getElementById("anchor-el").addEventListener("click", function() {
    var link = document.getElementById('anchor-el').getAttribute("href");
    window.open(link,'_blank');
});