但有時我們會遇到這樣的問題,我們希望禁止訪問者使用右鍵選單或希望屏蔽右鍵選單的某些功能,例如,為了保護網頁內容我們不希望訪問者透過右鍵選單來查看網頁原始碼,也不希望其透過右鍵來對網頁內容進行選取、複製等,許多網頁設計者在考慮這個問題的時候都是簡單地對右鍵進行屏蔽,與其這樣我們不如用腳本來實現一個風格右鍵選單,並在這個右鍵選單中裝上我們自己的內容。下面我們就來試試這個設想。
我們首先要考慮的問題是透過滑鼠右鍵點選事件來呼叫一個函數,這個函數用來顯示新的右鍵選單的內容。我們知道滑鼠的右鍵事件是透過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中裝上我們想要裝的東西。透過滑鼠事件呼叫函數來控制它的顯隱,這就達到了使用滑鼠右鍵的效果了。