連載：
網頁中的自定義右鍵菜單越來越普遍，自定義右鍵菜單可以增強用戶體驗，讓用戶使用軟件更加的簡便，今天我們就來基於Bootstrap來開發自己的自定義右鍵菜單。
一、首先，准備好自定義菜單，供單擊右鍵展示； 菜單默認不可見，可以通過 style="display:block" 進行調試預覽;
<ul class="dropdown-menu"> <li> <a href="javascript:;">添加</a> </li> <li> <a href="javascript:;">刪除</a> </li> <li> <a href="javascript:;">關於我們</a> </li> </ul>
二、實現點擊右鍵顯示自定義菜單;
正確的顯示右鍵菜單，我們需要完成以下3個步驟:
1.右鍵菜單是一種事件行為; 注冊事件，監聽瀏覽器的右鍵菜單；
2.默認情況下，出現瀏覽器系統菜單； 阻止瀏覽器默認事件行為；
3.顯示自定義菜單； 根據用戶點擊的坐標位置，設置自定義菜單的位置，然后進行顯示；
$(function(){ //頁面文檔對象注冊上下文（右鍵）菜單事件 $(document).on("contextmenu",function(event){ var pageX = event.pageX;//鼠標單擊的x坐標 var pageY = event.pageY;//鼠標單擊的y坐標 //獲取菜單並設置菜單的位置 $("#contextMenu").css({ left:pageX+"px",//設置菜單離頁面左邊距離，left等效於x坐標 top:pageY+"px"//設置菜單離頁面上邊距離，top等效於y坐標 }).stop().fadeIn(500);//顯示使用淡入效果,比如不需要動畫可以使用show()替換; event.preventDefault();//阻止瀏覽器與事件相關的默認行為；此處就是彈出右鍵菜單 }); });
三、隱藏自定義菜單；當用戶點擊菜單某一項或點擊其他區域進行隱藏；
實現方式：用戶使用鼠標的左鍵或中鍵都要進行自定義菜單的隱藏；設計思路與默認瀏覽器隱藏菜單方式一致；
//文檔對象注冊鼠標按下事件； $(document).on("mousedown",function(event){ //button等於0代表左鍵，button等於1代表中鍵 if(event.button==0 || event.button==1){ $("#contextMenu").stop().fadeOut(200);//獲取菜單停止動畫，進行隱藏使用淡出效果 } });
實現方式：判斷橫向位置（pageX）+自定義菜單寬度之和，如果超過頁面寬度及為溢出，需要特殊處理；
//文檔對象注冊上下文（右鍵）菜單事件 $(document).on("contextmenu",function(event){ var pageX = event.pageX;//鼠標單擊的x坐標 var pageY = event.pageY;//鼠標單擊的y坐標 //獲取菜單 var contextMenu = $("#contextMenu"); var cssObj = { top:pageY+"px",//設置菜單離頁面上邊距離，top等效於y坐標 left:pageX+"px"//設置菜單離頁面左邊距離，left等效於x坐標 }; //判斷橫向位置（pageX）+自定義菜單寬度之和，如果超過頁面寬度及為溢出，需要特殊處理； var menuWidth = contextMenu.width(); var pageWidth = $(document).width(); if(pageX+contextMenu.width()>pageWidth){ cssObj.left = pageWidth-menuWidth-5+"px"; //-5是預留右邊一點空隙，距離右邊太緊不太美觀； } //設置菜單的位置 $("#contextMenu").css(cssObj).stop().fadeIn(200);//顯示使用淡入效果,比如不需要動畫可以使用show()替換; event.preventDefault();//阻止瀏覽器與事件相關的默認行為；此處就是彈出右鍵菜單 });
如果你是按照本文章步驟進行編寫，那么你只需要打開你的自己網頁，就可以看到正確的效果了，Over。