今天和大家一起學習一下如何在浏覽器中實現類似於應用程序的鼠標右擊後出現右鍵菜單的效果
首先要解決的問題是在怎樣的情況鼠標右擊不會出現IE的菜單
思路可以有兩個
一個是將焦點移開
還有一個就是點在網頁的什麼地方不會出現右鍵菜單
而且會響應鼠標點擊消息
想了想
總結出的下面幾種方法
響應右鍵消息出一個ALERT框（還有點新鮮的東東沒有）
響應右鍵消息後彈出一個新的窗口
將初始頁的的焦點移開
可是經過試驗後發現只有窗口出現在鼠標右擊的位置時
才會沒有浏覽器的右鍵菜單出現
響應右鍵消息後彈出一個HTML的對話框
即使用showModalDialog來開啟一個HTML對話框
使用這種方式可以讓右鍵菜單不會出現
但是有一個問題是使用使用showModalDialog開啟的對話框不會向使用Window
Open開啟的對話框一樣可以移出屏幕所在的范圍
就是說始終可以看見有一個對話框出現在屏幕上
這條路也不能走了
最後一招了
在Select上進行鼠標右擊或左擊都不會有反應
那麼如果每次鼠標都點在Select上
不就不會出現浏覽器的右鍵菜單了
下面就是一個例子
感興趣的可以把下面的拷貝成l
就可以看看效果了
< HTML>
< title>webjx Test< /title>
< script>
var x
y;
document
onmousemove=moveMouse
document
onmousedown=click
function moveMouse()
{
Layer
style
left = event
clientX
;
Layer
style
top = event
clientY
;
}
function click()
{
if (event
button==
)
{
x = event
clientX;
y = event
clientY;
Layer
style
visibility=
;
window
setTimeout(
showMenu();
);
}
else
{
HiddenPop();
PopMenu
style
visibility=
hidden
;
}
}
function showMenu()
{
PopMenu
style
left = x
;
PopMenu
style
top = y
;
PopMenu
style
visibility=
;
HiddenPop();
}
function HiddenPop()
{
Layer
style
visibility=
hidden
;
}
< /script>
< BODY>
在窗口中右擊一下看看出什麼:)
< div id=Layer
>
< select >< /select>
< /div>
< div id=PopMenu >
< table border=
width=
>
< TH align=
center
color=
sliver
onclick=
>
右鍵菜單
< /tH>
< tr>
< td>
click it!:)
< /td>
< /tr>
< /table>
< /div>
< /BODY>
< /HTML>
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25485.html
