CSS+javascript打造超酷右鍵菜單

css|菜單

　　但有時候我們會遇到這樣的問題，我們希望禁止訪問者使用右鍵菜單或者希望屏蔽右鍵菜單的某些功能，比如，為了保護網頁內容我們不希望訪問者通過右鍵菜單來查看網頁原始碼，也不希望其通過右鍵來對網頁內容進行選取、複製等，很多網頁設計者在考慮這個問題的時候都是簡單地對右鍵進行屏蔽，與其這樣我們還不如用指令碼來實現一個風格右鍵菜單，並在這個右鍵菜單中裝上我們自己的內容。下面我們來嘗試一下這個設想。

　　我們首先要考慮的問題是通過滑鼠右鍵單擊事件來調用一個函數，這個函數用來顯示新的右鍵菜單的內容。我們知道滑鼠的按右鍵事件是通過document.oncontextmenu來調用的，如果我們自行定義document.oncontextmenu=某個函數，這樣就可以實現新右鍵菜單的調用了，關鍵問題是如何通過這個函數來控制功能表的顯示，同時，還要通過表單的單擊事件document.body.onclick（一般指左鍵單擊）來隱藏菜單，這樣一個過程就完成了滑鼠右鍵菜單的彈出和隱藏。

　　首先來看看這段指令碼代碼：

/*初始化*/
<script language="javascript1.2">
/*如果當前瀏覽器是Internet Explorer，document.all就返回真*/
if (document.all && window.print) {

/*選擇菜單方塊的顯示樣式*/
ie5menu.className = menuskin;

/*重新導向滑鼠右鍵事件的處理過程為自訂程式showmenuie5*/
document.oncontextmenu = showmenuie5;

/*重新導向滑鼠左鍵事件的處理過程為自訂程式hidemenuie5*/
document.body.onclick = hidemenuie5;
}
</script>

　　一般情況下頁面裝載完畢後才發生滑鼠右鍵事件，所以為了不影響頁面的裝載速度我們可以把這段代碼放在頁面的最後面。這段代碼很簡單，首先檢驗是不是IE瀏覽器，如果是那麼下面的定義就應該有效。也就是說當檢查到用戶端使用的瀏覽器是IE的時候那麼當使用者產生右鍵事件時就調用函數showmenuie5，當使用者產生左鍵事件時就調用函數hidemenuie5。

　　解決了上面這個問題，現在我們要考慮如何通過函數showmenuie5和函數hidemenuie5來實現菜單的顯示和隱藏。當然，這裡的菜單並不是真正意義的右鍵菜單，而是我們自己做的一個div，在這個div中裝上我們想要裝的東西。通過滑鼠事件調用函數來控制它的顯隱，這就達到了使用滑鼠右鍵一樣的效果了。