根據我對你的問題的理解，你希望用結果“替換”正常的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 class="context-anchor"> Anchor </a><br>
<br>
<a > 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 片段中被阻止。
這絕對是很多代碼來創建一個奇怪和不常見的瀏覽器行為。所以我不會推薦任何人使用它。
