使用 JavaScript、HTML 和 CSS 實作右鍵選單

JavaScript

id="contextmenu" 是選單本體，id="main" 是顯示選單的區域。

const contextmenu = document.getElementById('contextmenu');
const main = document.getElementById("main");
main.addEventListener('contextmenu', (e) => {
   e.preventDefault();
   contextmenu.style.left = e.pageX + 'px';
   contextmenu.style.top = e.pageY + 'px';
   contextmenu.style.display = 'block';
});
main.addEventListener('click', () => {
   contextmenu.style.display = 'none';
});

HTML

<div id="contextmenu">
    <ul>
        <li>Delete</li>
    </ul>
</div>

CSS

#contextmenu {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   border-radius: 8px;
   background-color: #F9F9F9;
   border: solid 1px #E3E3E3;
   padding: 4px;
   width: 192px;
}

#contextmenu ul{
   padding-left: 0;
   margin: 0;
}

#contextmenu li {
   cursor: pointer;
   margin: 0;
   padding: 4.75px 0 4.75px 16px;
   border-radius: 4px;
   list-style: none;
   font-size: 14px;
}

※ 點擊時的事件與功能需另行實作。