javascript 右鍵選單

發表於 分類於

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

範例

css 有一部分其實是仿 bootstrap 的

DEMO

初始化

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

處理事件

顯示選單

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

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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
document.addEventListener('contextmenu', e => {
	ctxmenu.classList.remove('show')
})
document.addEventListener('click', e => {
	ctxmenu.classList.remove('show')
})