?最近有程序猿給小編提出如何在瀏覽器中實現類似于應用程序的右鍵菜單的效果,小編在嘗試一番后,發現實現方法并不是很難,那么現在就讓小編為大家介紹瀏覽器上實現右鍵菜單的方法。
首先要解決的問題是在怎樣的情況鼠標右擊不會出現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>
上文就是瀏覽器上實現右鍵菜單的方法,雖然效果不是很完美,但是還是可以實現的,如果哪位大俠有更好的解決方法。可以給錯新小編留言哦。
新聞熱點
疑難解答
圖片精選