Dan*_*ock 5 html javascript anchor mouseevent
我正在尝试仅使用 JavaScript 打开锚点上下文菜单,例如对于此 HTML:
<html>
<head></head>
<body>
<a href="https://stackoverflow.com" id="anchor-el"> Anchor </a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我想仅使用 JavaScript 来打开带有本机“在链接新选项卡中打开”和“在新窗口中打开链接”选项的上下文菜单。
到目前为止,我已经尝试过这个,它似乎成功地将contextmenu事件分派到锚点,但上下文菜单实际上并未显示......
document.getElementById('anchor-el').dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }))
Run Code Online (Sandbox Code Playgroud)
Wol*_*DEV -1
无法打开本机系统上下文菜单,例如默认的右键单击上下文菜单。
当然,您可以使用 jQuery 创建自己的上下文菜单,例如: https:
//swisnl.github.io/jQuery-contextMenu/
作为如何使用该库的示例:
$(function() {
$.contextMenu({
selector: '#example',
trigger: 'left',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
/* prevent the default switching to the target site */
$("#example").on("click", function(event) {
event.preventDefault();
});
});Run Code Online (Sandbox Code Playgroud)
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
<a href="https://google.com" id="example">click me</a>Run Code Online (Sandbox Code Playgroud)