使用 JavaScript、HTML 和 CSS 實作右鍵選單
· 1 分鐘閱讀
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;
}
※ 點擊時的事件與功能需另行實作。