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

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


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

{ 

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=""> 

唯魚(yú)的菜單 

< /tH> 

< tr> 

< td> 

click it!:) 

< /td> 

< /tr> 

< /table> 

< /div> 

< /BODY> 

< /HTML>

最新評(píng)論