|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
|
今天和大家一起学习一下如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。iMwLinux联盟
iMwLinux联盟
首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单。思路可以有两个，一个是将焦点移开，还有一个就是点在网页的什么地方不会出现右键菜单，而且会响应鼠标点击消息。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
想了想, 总结出的下面几种方法 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
1、响应右键消息出一个ALERT框（还有点新鲜的东东没有）。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
2、响应右键消息后弹出一个新的窗口。将初始页的的焦点移开。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
可是经过试验后发现只有窗口出现在鼠标右击的位置时，才会没有浏览器的右键菜单出现。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
3、响应右键消息后弹出一个HTML的对话框。即使用showModalDialog来开启一个HTML对话框。使用这种方式可以让右键菜单不会出现。但是有一个问题是使用使用showModalDialog开启的对话框不会向使用Window.Open开启的对话框一样可以移出屏幕所在的范围。就是说始终可以看见有一个对话框出现在屏幕上。这条路也不能走了。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
4、最后一招了，在Select上进行鼠标右击或左击都不会有反应。那么如果每次鼠标都点在Select上，不就不会出现浏览器的右键菜单了。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
下面就是一个例子，感兴趣的可以把下面的拷贝成Test.html，就可以看看效果了。 iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
< HTML> iMwLinux联盟
iMwLinux联盟
< title>webjx Test< /title> iMwLinux联盟
iMwLinux联盟
< script> iMwLinux联盟
iMwLinux联盟
var x, y; iMwLinux联盟
iMwLinux联盟
document.onmousemove=moveMouse iMwLinux联盟
iMwLinux联盟
document.onmousedown=click iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
function moveMouse() iMwLinux联盟
iMwLinux联盟
{ iMwLinux联盟
iMwLinux联盟
Layer1.style.left = event.clientX - 2; iMwLinux联盟
iMwLinux联盟
Layer1.style.top = event.clientY - 2; iMwLinux联盟
iMwLinux联盟
} iMwLinux联盟
iMwLinux联盟
function click() iMwLinux联盟
iMwLinux联盟
{ iMwLinux联盟
iMwLinux联盟
if (event.button==2) iMwLinux联盟
iMwLinux联盟
{ iMwLinux联盟
iMwLinux联盟
x = event.clientX; iMwLinux联盟
iMwLinux联盟
y = event.clientY; iMwLinux联盟
iMwLinux联盟
Layer1.style.visibility=""; iMwLinux联盟
iMwLinux联盟
window.setTimeout("showMenu();", 500); iMwLinux联盟
iMwLinux联盟
} iMwLinux联盟
iMwLinux联盟
else iMwLinux联盟
iMwLinux联盟
{ iMwLinux联盟
iMwLinux联盟
HiddenPop(); iMwLinux联盟
iMwLinux联盟
PopMenu.style.visibility=’hidden’; iMwLinux联盟
iMwLinux联盟
} iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
} iMwLinux联盟
iMwLinux联盟
function showMenu() iMwLinux联盟
iMwLinux联盟
{ iMwLinux联盟
iMwLinux联盟
PopMenu.style.left = x- 2; iMwLinux联盟
iMwLinux联盟
PopMenu.style.top = y- 2; iMwLinux联盟
iMwLinux联盟
PopMenu.style.visibility=""; iMwLinux联盟
iMwLinux联盟
HiddenPop(); iMwLinux联盟
iMwLinux联盟
} iMwLinux联盟
iMwLinux联盟
function HiddenPop() iMwLinux联盟
iMwLinux联盟
{ iMwLinux联盟
iMwLinux联盟
Layer1.style.visibility=’hidden’; iMwLinux联盟
iMwLinux联盟
} iMwLinux联盟
iMwLinux联盟
< /script> iMwLinux联盟
iMwLinux联盟
< BODY> iMwLinux联盟
iMwLinux联盟
iMwLinux联盟
在窗口中右击一下看看出什么:) iMwLinux联盟
iMwLinux联盟
< div id=Layer1 style="position:absolute; width:4px; height:4px; z-index:3; visibility: hidden"> iMwLinux联盟
iMwLinux联盟
< select style="width:4">< /select> iMwLinux联盟
iMwLinux联盟
< /div> iMwLinux联盟
iMwLinux联盟
< div id=PopMenu style="position:absolute; width:100px; height:100px; z-index:1; visibility: hidden"> iMwLinux联盟
iMwLinux联盟
< table border=2 width=100 > iMwLinux联盟
iMwLinux联盟
< TH align="center" color="sliver" onclick=""> iMwLinux联盟
iMwLinux联盟
右键菜单 iMwLinux联盟
iMwLinux联盟
< /tH> iMwLinux联盟
iMwLinux联盟
< tr> iMwLinux联盟
iMwLinux联盟
< td> iMwLinux联盟
iMwLinux联盟
click it!:) iMwLinux联盟
iMwLinux联盟
< /td> iMwLinux联盟
iMwLinux联盟
< /tr> iMwLinux联盟
iMwLinux联盟
< /table> iMwLinux联盟
iMwLinux联盟
< /div> iMwLinux联盟
iMwLinux联盟
< /BODY> iMwLinux联盟
iMwLinux联盟
< /HTML>
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
