DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> CSS+JavaScript打造超酷右鍵菜單
CSS+JavaScript打造超酷右鍵菜單
編輯:關於JavaScript     

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

  我們首先要考慮的問題是通過鼠標右鍵單擊事件來調用一個函數,這個函數用來顯示新的右鍵菜單的內容。我們知道鼠標的右鍵單擊事件是通過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中裝上我們想要裝的東西。通過鼠標事件調用函數來控制它的顯隱,這就達到了使用鼠標右鍵一樣的效果了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved