其實在網(wǎng)頁上實現(xiàn)右鍵菜單的風(fēng)格化已經(jīng)是一個老話題了，正常情況下，網(wǎng)頁上的右鍵菜單是默認(rèn)IE右鍵選項，包括了一些常用的功能。
但有時候我們會遇到這樣的問題，我們希望禁止訪問者使用右鍵菜單或者希望屏蔽右鍵菜單的某些功能，比如，為了保護(hù)網(wǎng)頁內(nèi)容我們不希望訪問者通過右鍵菜單來查看網(wǎng)頁源代碼，也不希望其通過右鍵來對網(wǎng)頁內(nèi)容進(jìn)行選取、復(fù)制等，很多網(wǎng)頁設(shè)計者在考慮這個問題的時候都是簡單地對右鍵進(jìn)行屏蔽，與其這樣我們還不如用腳本來實現(xiàn)一個風(fēng)格右鍵菜單，并在這個右鍵菜單中裝上我們自己的內(nèi)容。下面我們來嘗試一下這個設(shè)想。
我們首先要考慮的問題是通過鼠標(biāo)右鍵單擊事件來調(diào)用一個函數(shù)，這個函數(shù)用來顯示新的右鍵菜單的內(nèi)容。我們知道鼠標(biāo)的右鍵單擊事件是通過 document.oncontextmenu來調(diào)用的，如果我們自行定義document.oncontextmenu=某個函數(shù)，這樣就可以實現(xiàn)新右鍵菜單的調(diào)用了，關(guān)鍵問題是如何通過這個函數(shù)來控制菜單的顯示，同時，還要通過窗體的單擊事件document.body.onclick（一般指左鍵單擊）來隱藏菜單，這樣一個過程就完成了鼠標(biāo)右鍵菜單的彈出和隱藏。
<%@ page language="java" pageEncoding="GBK" %>
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>css和javascript創(chuàng)建頁面右鍵菜單</title>
<style type="text/css">
body {
font-family: "宋體";
font-size: 12px;
}
.skin0 {
padding-top: 4px;
text-align: left;
width: 100px;
border: 2px solid black;
background-color: menu;
font-family: "宋體";
line-height: 20px;
cursor: default;
visibility: hidden;
}
.skin1 {
padding-top: 4px;
cursor: default;
font: menutext;
text-align: left;
font-family: "宋體";
font-size: 10pt;
width: 100px;
background-color: menu;
border: 1 solid buttonface;
visibility: hidden;
border: 2 outset buttonhighlight;
}
</style>
<script language='javascript'>
function load1(){
if (document.all && window.print) {
document.oncontextmenu = showmenuie5;
document.onclick = hidemenuie5;
}
}
function showmenuie5() {
//獲取當(dāng)前鼠標(biāo)右鍵按下后的位置，據(jù)此定義菜單顯示的位置
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//如果從鼠標(biāo)位置到窗口右邊的空間小于菜單的寬度，就定位菜單的左坐標(biāo)（Left）為當(dāng)//前鼠標(biāo)位置向左一個菜單寬度
if (rightedge <ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else //否則，就定位菜單的左坐標(biāo)為當(dāng)前鼠標(biāo)位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;
//*如果從鼠標(biāo)位置到窗口下邊的空間小于菜單的高度，就定位菜單的上坐標(biāo)（Top）為當(dāng)前鼠標(biāo)位置向上一個菜單高度
if (bottomedge <ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
//設(shè)置菜單可見
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
//jumptoie5()函數(shù)實現(xiàn)鼠標(biāo)點擊右鍵菜單中的層時發(fā)生的事情，也就是執(zhí)行選項
function jumptoie5() {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
load1()
</script>
</head>
<body>
右鍵菜單創(chuàng)建測試，請點擊右鍵測試一下效果吧！o(∩_∩)o...哈哈
<div id="ie5menu" class="skin0">
<div onclick="alert('后退請注意安全')">后退</div>
<div onclick="alert('祝你前程似錦，大膽往前走吧！')">前進(jìn)</div>
<hr>
<div url="http://user.qzone.qq.com/648721840" target="_blank" onclick="jumptoie5()">偶偶的喜怒哀樂人生百味</div>
<div url="http://stta04.blog.163.com"
target="_blank" onclick="jumptoie5()">偶偶的BK</div>
<div url=http://stta0405.blog.163.com
target="_blank" onclick="jumptoie5()">偶偶的music</div>
<div url="http://blog.csdn.net/foamflower" target="_blank" onclick="jumptoie5()">偶偶的CSDN</div>
<hr>
<div url="http://suseyiyuan.ycool.com/
<div url="http://qiu-7u.music.hexun.com/" target="_blank" onclick="jumptoie5()">偶偶的偶像2</div>
<hr>
<div url="http://blog.csdn.net/foamflower" target="_blank" onclick="jumptoie5()">關(guān)于本站</div>
<div url="mailto:stta0404@163.com" onclick="jumptoie5()">聯(lián)系我</div>
</div>
</body>
</html>
代碼解釋：
1、 在頁面載入時，先執(zhí)行l(wèi)oad1()方法
首先檢驗是不是IE瀏覽器，如果當(dāng)前瀏覽器是Internet Explorer，document.all就返回真。則下面的定義就應(yīng)該有效。也就是說當(dāng)檢查到客戶端使用的瀏覽器是IE的時候那么當(dāng)用戶產(chǎn)生右鍵事件時就調(diào)用函數(shù) showmenuie5，當(dāng)用戶產(chǎn)生左鍵事件時就調(diào)用函數(shù)hidemenuie5。
2、接著我們要考慮如何通過函數(shù)showmenuie5和函數(shù)hidemenuie5來實現(xiàn)菜單的顯示和隱藏。
當(dāng)然，這里的菜單并不是真正意義的右鍵菜單，而是我們自己做的一個div，在這個div中裝上我們想要裝的東西。通過鼠標(biāo)事件調(diào)用函數(shù)來控制它的顯隱，這就達(dá)到了使用鼠標(biāo)右鍵一樣的效果了。
這一塊的最外層是一個id為ie5menu的div，我們定義了它的樣式為skin0，你也可以根據(jù)自定義其他樣式，然后替換skin0。
3、點擊菜單選項后的操作
jumptoie5()函數(shù)實現(xiàn)鼠標(biāo)點擊右鍵菜單中的層時發(fā)生的事情，也就是執(zhí)行選項
