今天來講一個關於右鍵選單的小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，可以說是萬金油屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。