如何使用 JavaScript 打開錨上下文菜單？

Question

我正在嘗試僅使用 JavaScript 打開一個錨上下文菜單，例如對於此 HTML：

<html>
  <head></head>
  <body>
    <a href="https://stackoverflow.com" id="anchor-el"> Anchor </a>
  </body>
</html>

我想僅使用 JavaScript 使用本機“在鏈接新選項卡中打開”和“在新窗口中打開鏈接”選項打開上下文菜單。

到目前為止，我已經試過這一點，它似乎成功地派遣一個contextmenu事件到錨，但在上下文菜單中實際上並沒有顯示...

document.getElementById('anchor-el').dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }))

Answer 1

從我明白你的問題，你希望“代替”正常的click與事件結果contextmenu結果......但與上下文菜單的只是前兩個項目。

這使它成為您必須定義的自定義菜單。 所以這里有一些東西......

 let contextElements = document.querySelectorAll(".context-anchor") let myContext = document.querySelector(".context") let contextItems = document.querySelectorAll(".context-item") let contextHref // To add event a listener on each .context-anchor element in order to show a "simulated context menu" contextElements.forEach(function(ce){ ce.addEventListener("click", function(e){ e.preventDefault() // Get the click coord to open the context menu at the right place let clickCoords = {x: e.pageX, y: e.pageY} // Get the href of the clicked link contextHref = ce.href // Create a mouse event let event = document.createEvent('MouseEvents'); event.initEvent('mycontextmenu', false, true); // Be ready to handle it this.addEventListener('mycontextmenu', function (e) { myContext.style.top = clickCoords.y myContext.style.left = clickCoords.x myContext.style.display= "block" }, false); // Dispatch it this.dispatchEvent(event); }) }) // Listener for the options of that "simulated context menu" contextItems.forEach(function(ci){ ci.addEventListener("click", function(e){ if(this.getAttribute("data-destination") === "tab"){ window.open(contextHref,"_blank") }else{ window.open(contextHref,"custom",`width=${0.99*screen.width},height=${0.94*screen.height}`) } }) }) // To hide the "simulated context menu" when there is a click anywhere else than on a .context-anchor element document.addEventListener("click", function(e){ if(myContext.style.display==="block" && e.target.classList.toString().split(" ").indexOf("context-anchor")<0){ myContext.style.display= "none" } })

 .context{ display: none; position: absolute; top: 0; left: 0; border: 1px solid lightgrey; background: white; margin: 1em; box-shadow: 2px 2px 2px grey; min-width: 15em; } .context-item{ font-family: "arial"; padding: 0.5em 2em; } .context-item:hover{ background: lightgrey; }

 <a href="https://stackoverflow.com" class="context-anchor"> Anchor </a><br> <br> <a href="http://hmpg.net/" > Normal anchor </a> <!-- The simulated context menu --> <div class="context"> <div class="context-item" data-destination="tab">Open link in a new tab</div> <div class="context-item" data-destination="window">Open link in a new window</div> </div>

注意：由於顯而易見的原因， window.open在 SO 片段中被阻止。 試試這個CodePen進行工作演示。

這絕對是創建奇怪和不常見的瀏覽器行為的大量代碼。 所以我不會推薦任何人使用它。

我發布它是因為這是一個賞金挑戰。oO（大聲笑！）

Answer 2

document.getElementById("anchor-el").addEventListener("click", function() {
    var link = document.getElementById('anchor-el').getAttribute("href");
    window.open(link,'_blank');
});

我相信它會幫助你。

Answer 3

如果我理解正確，您必須創建一個自定義contextmenu 。 所以這是一個例子。

 const menu = document.querySelector('[data-id=anchor-el]') const anchor = document.getElementById('anchor-el'); anchor.addEventListener('contextmenu', e => { e.preventDefault(); menu.style.top = e.pageX; menu.style.top = e.pageY; menu.style.display = 'block'; }); menu.querySelector('li#newTab').addEventListener('click', (evt) => { evt.preventDefault(); console.log('clicked open in new tab'); window.open(anchor.href); }); menu.querySelector('li#newWin').addEventListener('click', (evt) => { evt.preventDefault(); console.log('clicked open in new window'); window.open(anchor.href, '_blank', 'toolbar=0,location=0,menubar=0'); }); document.body.addEventListener('click', (evt) => { evt.preventDefault(); evt.stopPropagation(); menu.style.display = 'none'; });

 [data-id="anchor-el"] { width: 15rem; display: flex; margin: 0; padding: 0; align-items: stretch; align-content: space-evenly; flex-direction: column; justify-content: space-evenly; box-shadow: 0 0.25rem 0.325rem 0.175rem rgba(0, 0, 0, 0.2); position: relative; display: none; } [data-id="anchor-el"] ul li { width: 100%; list-style: none; margin: 0; padding: 0.5rem; position: relative; color: #000; font-weight: 500; font-size: 1rem; cursor: pointer; } [data-id="anchor-el"] ul li:hover { color: #f00; }

 <a href="https://stackoverflow.com" id="anchor-el"> Anchor </a> <div> <div type="context" data-id="anchor-el"> <ul> <li label="Open in new tab" id="newTab">Open in new tab</li> <li label="Open in new window" id="newWin">Open in new window</li> </ul> </div> </div>

Answer 4

如果您想在菜單中具有在新標簽頁中打開和在新窗口中打開選項，為什么只使用 HTML？

 <html> <head></head> <body> <a href="https://stackoverflow.com" id="anchor-el" target="_blank" title="If you run this snippet and click on this link, it won't work because you need to run it in your own editor"> Anchor </a> </body> </html>

每當單擊上述代碼時，都會在新選項卡中打開。 當右鍵單擊時，還將有一個選項用於在新選項卡中打開和在新窗口中打開。

屬性“target”指定鏈接的打開位置； 下面是一些例子：

target="_blank" - "Opens in new tab"
target="_self" - "Opens in the same tab"
target="_parent" - "Opens in the parent frame"
target="_top" - "Opens in the full body of the window"

Answer 5

無法打開本機系統上下文菜單，例如默認的右鍵單擊上下文菜單。
您當然可以使用 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(); }); });

 <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>

如何使用 JavaScript 打開錨上下文菜單？

問題描述

5 個解決方案

解決方案1
1 2020-10-14 22:39:13

解決方案2
0 2020-10-14 11:41:10

解決方案3
0

解決方案4
0 2020-10-17 13:06:06

解決方案5
-1 2020-10-13 15:18:27

如何使用 JavaScript 打開錨上下文菜單？

問題描述

5 個解決方案

解決方案1 1 2020-10-14 22:39:13

解決方案2 0 2020-10-14 11:41:10

解決方案3 0

解決方案4 0 2020-10-17 13:06:06

解決方案5 -1 2020-10-13 15:18:27

解決方案1
1 2020-10-14 22:39:13

解決方案2
0 2020-10-14 11:41:10

解決方案3
0

解決方案4
0 2020-10-17 13:06:06

解決方案5
-1 2020-10-13 15:18:27