?? 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 + -