實現(xiàn)自定義右鍵菜單我們需要清楚瀏覽器默認(rèn)的右鍵菜單觸發(fā)的基本過程

①：單擊右鍵，菜單出現(xiàn)

②：菜單出現(xiàn)，鼠標(biāo)箭頭一直在菜單左上角

③：再換個位置點擊右鍵，原菜單消失，新菜單出現(xiàn)在指定位置

④：點擊左鍵，中鍵，菜單消失

以上為大致實現(xiàn)過程，不全面，僅供參考

也許文字過于抽象，我們來看看代碼吧：

一、HTML結(jié)構(gòu)：

注意：結(jié)構(gòu)布局這一塊的合理性，這是根據(jù)谷歌瀏覽器默認(rèn)的右鍵菜單來布局的

二、css樣式

注意：樣式可以根據(jù)自己的喜好來

.rightmenu設(shè)置display：none是因為右鍵菜單本身是隱藏了因為點擊了才出現(xiàn)，倘若不加這句，菜單會出現(xiàn)在頁面的左上角，如圖：

三、js實現(xiàn)

分析：

①：瀏覽器本身就有右鍵菜單，我們也要做右鍵菜單，所以應(yīng)當(dāng)阻止瀏覽器的右鍵

? ? ? ? 這里可以用到preventDefault()，這個方法有著阻止默認(rèn)事件的功能，科普一下，什么是默認(rèn)事件：

例如：<a href="http:www.baidu.com">點我</>，可以知道這是可以跳轉(zhuǎn)到百度的，所以是有個跳轉(zhuǎn)時間的，這個事件我們沒有去用js實現(xiàn)，他是默認(rèn)的，所以稱之為默認(rèn)事件，同理，瀏覽器右鍵菜單。

②前面我們說了菜單出現(xiàn)，鼠標(biāo)箭頭一直在菜單左上角，這是怎么實現(xiàn)的呢，這涉及到event里面的事件發(fā)生坐標(biāo)了，我們點擊的位置就是我們右鍵點擊事件發(fā)生的位置，可以用坐標(biāo)來解釋這個位置，clientX(事件發(fā)生點和可視區(qū)域的位置)，offsetX(事件發(fā)生點和父級元素的位置)，pageX(事件發(fā)生點和頁面的位置)，screenX(事件發(fā)生點和屏幕的位置)，這里我們用offsetX/Y，因為我們是在BOW中點擊，所以具體原因大家百度一下就直道了，我們還是看代碼吧，代碼里標(biāo)注的很詳細(xì)。

以上僅供參考，更多的功能實現(xiàn)都是差不多的原理，好了，結(jié)束了。