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')
})

取消選單

這邊會看到contextmenuclick都做一樣的事情,就是隱藏選單

而如果在前面的步驟沒有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')
})