今天來講一個關于右鍵菜單的小demo，拋磚引玉。

首先，我們要用css和html做一個自定義右鍵菜單。

<!--自定義右鍵菜單html代碼--><div id='menu'><div class='menu'>功能1</div><div class='menu'>功能2</div><div class='menu'>功能3</div><div class='menu'>功能4</div><div class='menu'>功能5</div></div>

/*css代碼*/#menu{width: 0; /*設置為0 隱藏自定義菜單*/height: 125px;overflow: hidden; /*隱藏溢出的元素*/box-shadow: 0 1px 1px #888,1px 0 1px #ccc;position: absolute; /*自定義菜單相對與body元素進行定位*/}.menu{width: 130px;height: 25px;line-height: 25px;padding: 0 10px;}

現在我們已經有了自定義菜單，還需要一個很重要的事件 contextmenu。

> contextmenu :當你在頁面上右鍵點擊時，會觸發此事件，并會跳出瀏覽器自帶的右鍵菜單。

所以，我們要做的就是，在觸發contextmenu事件時，取消掉默認行為(也就是阻止瀏覽器顯示自帶的菜單)

通過傳入的事件對象，來確定鼠標的點擊位置，作為left和top的值來進行元素的定位，并顯示自定義菜單

window.oncontextmenu=function(e){//取消默認的瀏覽器自帶右鍵 很重要！！e.preventDefault();//獲取我們自定義的右鍵菜單var menu=document.querySelector('#menu');//根據事件對象中鼠標點擊的位置，進行定位menu.style.left=e.clientX+’px’;menu.style.top=e.clientY+’px’;//改變自定義菜單的寬，讓它顯示出來menu.style.width=’125px’;}//關閉右鍵菜單，很簡單window.onclick=function(e){//用戶觸發click事件就可以關閉了，因為綁定在window上，按事件冒泡處理，不會影響菜單的功能document.querySelector(’#menu’).style.height=0;}

這里只是一個很簡單的例子，contextmenu事件支持所有 HTML 元素，這意味者你可以給不同的元素，自定義不同的右鍵菜單，由于contextmenu事件會冒泡傳播，子節點上觸發的事件，在父節點上也會觸發，所以應該調用對應的函數或者設置對應的屬性值來阻止事件冒泡。

根據事件對象來定位其實很復雜也很簡單，除了clientY和clientX，鼠標事件對象提供了一系列復雜的相關信息，諸如layerX,pageX等等，這些值并不直觀，還存在瀏覽器兼容問題，不過clientX和clientY，可以說是萬金油屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。