我在有空的時候試著用純 javascript 實作了一個簡單的右鍵選單 雖然沒搞什麼複雜的 css，外觀也很醜，但基本上以功能來說是可以用的

範例#

css 有一部分其實是仿 bootstrap 的

DEMO

初始化#

const ctxmenu = document.querySelector('.ctxmenu') //選單元素
const baseEL = document.querySelector('.box') //要自訂選單的元素

處理事件#

顯示選單#

簡單來說就是把選單的位置移動到 event 的位置，然後顯示他

還有很重要的是要呼叫stopPropagation()這個函數，和後面做的事情有關

baseEL.addEventListener('contextmenu', e => {
	e.preventDefault()
	e.stopPropagation() //important!!

	//move element
	ctxmenu.style.top = e.y + 'px'
	ctxmenu.style.left = e.x + 'px'

	//show element
	ctxmenu.classList.add('show')
})

取消選單#

這邊會看到contextmenu和click都做一樣的事情，就是隱藏選單

而如果在前面的步驟沒有stopPropagation()的話會導致點擊在指定元素時也會同時移除show這個 class

document.addEventListener('contextmenu', e => {
	ctxmenu.classList.remove('show')
})
document.addEventListener('click', e => {
	ctxmenu.classList.remove('show')
})