当前位置: 代码迷 >> Web前端 >> 怎么实现浏览器下的右键菜单
  详细解决方案

怎么实现浏览器下的右键菜单

热度:84   发布时间:2012-09-21 15:47:26.0
如何实现浏览器上的右键菜单
首先要解决的问题是在怎样的情况鼠标右击不会出现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>
  相关解决方案