如何實(shí)現(xiàn)瀏覽器上的右鍵菜單

2024-09-06 12:45:14

字體：大中小

供稿：網(wǎng)友

　最近在程序員大本營中的討論中有一位老兄提出如何在瀏覽器中實(shí)現(xiàn)類似于應(yīng)用程序的鼠標(biāo)右擊后出現(xiàn)右鍵菜單的效果。唯魚試了試，發(fā)現(xiàn)不是很難解決。現(xiàn)在就將源碼和原理說出來和大家共享一下。哈，其實(shí)效果不是很完美啦，如果哪位大俠有更好的解決方法。可以給唯魚yyu@enet.com.cn來信羅。

　　首先要解決的問題是在怎樣的情況鼠標(biāo)右擊不會(huì)出現(xiàn)IE的菜單。思路可以有兩個(gè)，一個(gè)是將焦點(diǎn)移開，還有一個(gè)就是點(diǎn)在網(wǎng)頁的什么地方不會(huì)出現(xiàn)右鍵菜單，而且會(huì)響應(yīng)鼠標(biāo)點(diǎn)擊消息。（哈哈，廢話一大堆。思路嗎？總要多想想才有的）

想了想, 總結(jié)出的下面幾種方法
1、響應(yīng)右鍵消息出一個(gè)ALERT框（還有點(diǎn)新鮮的東東沒有）。
2、響應(yīng)右鍵消息后彈出一個(gè)新的窗口。將初始頁的的焦點(diǎn)移開。
可是經(jīng)過試驗(yàn)后發(fā)現(xiàn)只有窗口出現(xiàn)在鼠標(biāo)右擊的位置時(shí)，才會(huì)沒有瀏覽器的右鍵菜單出現(xiàn)。
3、響應(yīng)右鍵消息后彈出一個(gè)HTML的對話框。即使用showModalDialog來開啟一個(gè)HTML對話框。使用這種方式可以讓右鍵菜單不會(huì)出現(xiàn)。但是有一個(gè)問題是使用使用showModalDialog開啟的對話框不會(huì)向使用Window.Open開啟的對話框一樣可以移出屏幕所在的范圍。就是說始終可以看見有一個(gè)對話框出現(xiàn)在屏幕上。這條路也不能走了。
4、呵呵，最后一招了，唯魚偶爾發(fā)現(xiàn)在Select上進(jìn)行鼠標(biāo)右擊或左擊都不會(huì)有反應(yīng)。那么如果每次鼠標(biāo)都點(diǎn)在Select上，不就不會(huì)出現(xiàn)瀏覽器的右鍵菜單了。

下面就是一個(gè)例子，感興趣的可以把下面的拷貝成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()

上一篇：生成html靜態(tài)文件后的分頁（客戶端版）

下一篇：鼠標(biāo)圖片振動(dòng)代碼

學(xué)習(xí)交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注