📄 51html_net--精彩文章.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0066)http://www.51html.net/pages/gardenplot/example/html_example017.htm -->
<HTML><HEAD><TITLE>51HTML.NET--精彩文章</TITLE><!-- #BeginTemplate "/Templates/internet.dwt" --><!-- #BeginEditable "doctitle" -->
<META content="" name=description>
<META content="" name=keywords><!-- #EndEditable -->
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK
href="51HTML_NET--精彩文章.files/new.css" type=text/css rel=stylesheet>
<META http-equiv=pragma content=no-cache>
<SCRIPT language=javascript src="51HTML_NET--精彩文章.files/dp.js"></SCRIPT>
<SCRIPT language=javascript src="51HTML_NET--精彩文章.files/check.js"></SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY text=#030371 vLink=#030371 aLink=#ffcc00 link=#030371 bgColor=#ffffff
topMargin=20>
<TABLE height=153 cellSpacing=0 cellPadding=0 width="68%" align=center
border=0><TBODY>
<TR>
<TD height=43>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD class=f2 width="79%" bgColor=#0086cc><B><FONT
color=#ffffff>精彩文章</FONT></B></TD>
<TD width="5%" bgColor=#039eda> </TD>
<TD width="7%" bgColor=#7bc1f4> </TD>
<TD width="9%" bgColor=#d7ecff> </TD></TR>
<TR bgColor=#eaeaea>
<TD colSpan=4 height=10>
<DIV class=f1 align=right>>></DIV></TD></TR>
<TR>
<TD colSpan=4 height=10>
<HR width="100%" noShade SIZE=1>
</TD></TR></TBODY></TABLE>
<TABLE height=22 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=b3 height=16>
<DIV id=Position></DIV>
<DIV id=Title><B><BR><!-- #BeginEditable "title" -->如何实现浏览器上的右键菜单<!-- #EndEditable --></B></DIV><BR>
<DIV id=Time></DIV>
<DIV id=Image align=center></DIV>
<DIV
id=Content><!-- #BeginEditable "content" --> 最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。唯鱼试了试，发现不是很难解决。现在就将源码和原理说出来和大家共享一下。哈，其实效果不是很完美啦，如果哪位大侠有更好的解决方法。可以给唯鱼yyu@enet.com.cn来信罗。
<BR> 首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单。思路可以有两个，一个是将焦点移开，还有一个就是点在网页的什么地方不会出现右键菜单，而且会响应鼠标点击消息。（哈哈，废话一大堆。思路吗？总要多想想才有的）
<BR><BR>想了想, 总结出的下面几种方法 <BR> 1、响应右键消息出一个ALERT框（还有点新鲜的东东没有）。
<BR> 2、响应右键消息后弹出一个新的窗口。将初始页的的焦点移开。
<BR> 可是经过试验后发现只有窗口出现在鼠标右击的位置时，才会没有浏览器的右键菜单出现。
<BR> 3、响应右键消息后弹出一个HTML的对话框。即使用showModalDialog来开启一个HTML对话框。使用这种方式可以让右键菜单不会出现。但是有一个问题是使用使用showModalDialog开启的对话框不会向使用Window.Open开启的对话框一样可以移出屏幕所在的范围。就是说始终可以看见有一个对话框出现在屏幕上。这条路也不能走了。
<BR> 4、呵呵，最后一招了，唯鱼偶尔发现在Select上进行鼠标右击或左击都不会有反应。那么如果每次鼠标都点在Select上，不就不会出现浏览器的右键菜单了。
<BR>下面就是一个例子，感兴趣的可以把下面的拷贝成Test.html，就可以看看效果了。 <BR><HTML>
<BR><head> <BR><title>VFish Test</title>
<BR><script> <BR>var x,y; <BR>document.onmousemove=moveMouse
<BR>document.onmousedown=click
<P>function moveMouse() { <BR>Layer1.style.left = event.clientX - 2;
<BR>Layer1.style.top = event.clientY - 2; <BR>} <BR>function click()
{ <BR>if (event.button==2) { <BR>x = event.clientX; <BR>y =
event.clientY; <BR>Layer1.style.visibility="";
<BR>window.setTimeout("showMenu();",500); <BR>} <BR>else {
<BR>HiddenPop(); <BR>PopMenu.style.visibility='hidden'; <BR>} <BR>}
</P>
<P>function showMenu() { <BR>PopMenu.style.left = x- 2;
<BR>PopMenu.style.top = y- 2; <BR>PopMenu.style.visibility="";
<BR>HiddenPop(); <BR>} </P>
<P>function HiddenPop() { <BR>Layer1.style.visibility='hidden';
<BR>} <BR></script> <BR></head> <BR><BODY>
<BR>在窗口中右击一下看看出什么:) <BR><div id=Layer1 style="position:absolute;
width:4px; height:4px; z-index:3;"> <BR><select
style="width:4"></select> <BR></div> </P>
<P><div id=PopMenu style="position:absolute; width:100px;
height:100px; z-index:1; visibility: hidden"> </P>
<P><table border=2 width=100> <BR><TH align="center"
color="sliver">唯鱼的菜单</tH> <BR><tr><td> <BR>cick
it!:) <BR></td></tr></table> <BR></div> </P>
<P></BODY> <BR></HTML></P><!-- #EndEditable -->
<P align=right><!-- #BeginEditable "author" -->原作者：不详<BR>来源：eNet学院<!-- #EndEditable --></P></DIV></TD></TR></TBODY></TABLE><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=f2 vAlign=baseline colSpan=4 height=12>
<FORM action=http://www.51cgi.net/cgi-bin/search/search.cgi
method=post>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
<TBODY>
<TR>
<TD class=f2 vAlign=bottom width=270>
<DIV align=right>站内搜索：</DIV></TD>
<TD width=260><INPUT onmouseover=this.focus()
onfocus=this.select() size=12 value=请输入关键词 name=terms> <INPUT type=submit value=开始搜索!! name=SUBMIT>
</TD></TR></TBODY></TABLE></FORM></TD></TR>
<TBODY>
<TR>
<TD class=f2 vAlign=baseline width="16%" height=15>
<DIV align=center><A
href="http://www.51html.net/cgi-bin/ubb/Ultimate.cgi">发表感言</A></DIV></TD>
<TD class=f2 vAlign=baseline width="16%" height=15>
<DIV align=center><A class=lstxt
href="javascript:doPrint();">打印本稿</A></DIV></TD>
<TD class=f2 vAlign=baseline align=right width="19%" height=15>
<DIV align=right>推荐给朋友：</DIV></TD>
<TD class=f2 width="50%" height=15>
<FORM name=Form2000 onsubmit="return validate_form()" action=""
method=post encType=text/plain><INPUT onmouseover=this.focus()
onfocus=this.select() size=17 value=请输入好友的E-mail name=FriendEmail> <INPUT type=submit value=Go name=Subject> <INPUT type=hidden
name=Context> </FORM></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=blue-big width="25%"> </TD>
<TD class=blue-big width="25%"> </TD>
<TD class=blue-big colSpan=2> </TD>
<TD vAlign=bottom align=right width="25%">
<DIV align=center><A href="javascript:window.close();"><IMG
height=21 src="51HTML_NET--精彩文章.files/close.gif" width=78
border=0></A></DIV></TD></TR></TBODY></TABLE>
<HR width="100%" noShade SIZE=1>
</TD></TR>
<TR>
<TD vAlign=top height=28><FONT size=2>精彩推荐:</FONT><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><!-- #BeginEditable "commend" -->commend<!-- #EndEditable --></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD vAlign=top height=7>
<TABLE borderColor=#000000 cellSpacing=0 borderColorDark=#ffffff
cellPadding=0 width="100%" border=1>
<TBODY>
<TR>
<TD class=f2 width="20%" bgColor=#eaeaea height=2>
<DIV align=center><A
href="http://www.51html.net/directory/html_guide.htm">HTML指南</A></DIV></TD>
<TD class=f2 width="20%" bgColor=#eaeaea height=2>
<DIV align=center><A
href="http://www.51html.net/directory/html_gardenplot.htm">HTML园地</A></DIV></TD>
<TD class=f2 width="23%" bgColor=#eaeaea height=2>
<DIV align=center><A
href="http://www.51html.net/directory/html_css_dhtml.htm">CSS&DHTML</A></DIV></TD>
<TD class=f2 width="20%" bgColor=#eaeaea height=2>
<DIV align=center><A
href="http://www.51html.net/cgi-bin/ubb/Ultimate.cgi">HTML论坛</A></DIV></TD>
<TD class=f2 width="17%" bgColor=#eaeaea height=2>
<DIV align=center><A
href="http://www.51html.net/directory/html_download.htm">免费下载</A></DIV></TD></TR></TBODY></TABLE>
<TABLE borderColor=#000000 cellSpacing=0 borderColorDark=#ffffff
cellPadding=0 width="100%" border=1>
<TBODY>
<TR>
<TD class=f2 width="25%" bgColor=#eaeaea height=2>
<DIV align=center><A href="http://www.51html.net/contribute.htm"
target=_blank>欢迎投稿</A></DIV></TD>
<TD class=f2 width="25%" bgColor=#eaeaea height=2>
<DIV align=center><A href="http://www.51html.net/link_us.htm"
target=_blank>链接我们</A></DIV></TD>
<TD class=f2 width="25%" bgColor=#eaeaea height=2>
<DIV align=center><A href="http://www.51html.net/advert.htm"
target=_blank>广告联系</A></DIV></TD>
<TD class=f2 width="25%" bgColor=#eaeaea height=2>
<DIV align=center><A
href="mailto:hula@51html.net">联系我们</A></DIV></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD bgColor=#0086cc>
<DIV align=right><A class=content1
href="http://www.51html.net/"><B>WWW.51HTML.NET</B></A></DIV></TD></TR></TBODY></TABLE><!-- #EndTemplate --></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -