要制作一個contextmenu快捷菜單,可以按照以下步驟進行操作:
<button id="contextMenuBtn">右鍵點擊我</button>
<menu id="contextMenu">
<menuitem label="菜單項1"></menuitem>
<menuitem label="菜單項2"></menuitem>
</menu>
#contextMenu {
display: none;
position: absolute;
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 5px;
}
var contextMenu = document.getElementById("contextMenu");
var contextMenuBtn = document.getElementById("contextMenuBtn");
contextMenuBtn.addEventListener("contextmenu", function(event) {
event.preventDefault();
contextMenu.style.display = "block";
contextMenu.style.left = event.clientX + "px";
contextMenu.style.top = event.clientY + "px";
});
document.addEventListener("click", function() {
contextMenu.style.display = "none";
});
通過以上步驟,就可以制作一個簡單的contextmenu快捷菜單。您也可以根據實際需求對菜單進行更進一步的樣式和功能定制。