如何實現浏覽器上的右鍵菜單
最近在程序員大本營中的討論中有一位老兄提出如何在浏覽器中實現類似於應用程序的鼠標右擊後出現右鍵菜單的效果。唯魚試了試，發現不是很難解決。現在就將源碼和原理說出來和大家共享一下。哈，其實效果不是很完美啦，如果哪位大俠有更好的解決方法。可以給唯魚
[email protected]來信羅。
首先要解決的問題是在怎樣的情況鼠標右擊不會出現IE的菜單。思路可以有兩個，一個是將焦點移開，還有一個就是點在網頁的什麼地方不會出現右鍵菜單，而且會響應鼠標點擊消息。（哈哈，廢話一大堆。思路嗎？總要多想想才有的）
想了想, 總結出的下面幾種方法 1、響應右鍵消息出一個ALERT框（還有點新鮮的東東沒有）。
2、響應右鍵消息後彈出一個新的窗口。將初始頁的的焦點移開。
可是經過試驗後發現只有窗口出現在鼠標右擊的位置時，才會沒有浏覽器的右鍵菜單出現。
3、響應右鍵消息後彈出一個HTML的對話框。即使用showModalDialog來開啟一個HTML對話框。使用這種方式可以讓右鍵菜單不會出現。但是有一個問題是使用使用showModalDialog開啟的對話框不會向使用Window.Open開啟的對話框一樣可以移出屏幕所在的范圍。就是說始終可以看見有一個對話框出現在屏幕上。這條路也不能走了。
4、呵呵，最後一招了，唯魚偶爾發現在Select上進行鼠標右擊或左擊都不會有反應。那麼如果每次鼠標都點在Select上，不就不會出現浏覽器的右鍵菜單了。
下面就是一個例子，感興趣的可以把下面的拷貝成Test.html，就可以看看效果了。
< HTML>
< title>VFish Test< /title>
< script>
var x, y;
document.onmousemove=moveMouse
document.onmousedown=click
function moveMouse()
{
Layer1.style.left = event.clientX - 2;
Layer1.style.top = event.clientY - 2;
}
function click()
{
if (event.button==2)
{
x = event.clientX;
y = event.clientY;
Layer1.style.visibility="";
window.setTimeout("showMenu();", 500);
}
else
{
HiddenPop();
PopMenu.style.visibility=’hidden’;
}
}
function showMenu()
{
PopMenu.style.left = x- 2;
PopMenu.style.top = y- 2;
PopMenu.style.visibility="";
HiddenPop();
}
function HiddenPop()
{
Layer1.style.visibility=’hidden’;
}
< /script>
< BODY>
在窗口中右擊一下看看出什麼:)
< div id=Layer1 style="position:absolute; width:4px; height:4px; z-index:3; visibility: hidden">
< select style="width:4">< /select>
< /div>
< div id=PopMenu style="position:absolute; width:100px; height:100px; z-index:1; visibility: hidden">
< table border=2 width=100 >
< TH align="center" color="sliver" onclick="">
唯魚的菜單
< /tH>
< tr>
< td>
click it!:)
< /td>
< /tr>
< /table>
< /div>
< /BODY>
< /HTML>