自定义右键菜单

最新推荐文章于 2025-05-31 11:53:16 发布

原创最新推荐文章于 2025-05-31 11:53:16 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#menu #mozilla #generator #internet #function

js 专栏收录该内容

12 篇文章

订阅专栏

语法

event.button=0|1|2

参数	描述
0	规定鼠标左键。
1	规定鼠标中键。
2	规定鼠标右键。

Internet Explorer 拥有不同的参数：

参数	描述
1	规定鼠标左键。
4	规定鼠标中键。
2	规定鼠标右键。

提示和注释

注释：对于惯用左手的鼠标配置，上面的参数是颠倒的。

提示：Mozilla 的 Ctrl–Click 参数是 2 （等价于右击）。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
td{
border-bottom:1px solid #CCCCCC;
cursor:pointer;
}
a{
text-decoration:none;
}
</style>
</HEAD>

<BODY onmousedown="cMenu();" oncontextmenu="return false;">
<div id="menu" style="position:absolute;display:none;border:1px solid #000000;">
<table>
<tr><td onmouseover="this.bgColor='#CCCCFF'" onmouseout="this.bgColor='#FFFFFF'"><a href="http://www.baidu.com"> Menu1 </a></td></tr>
<tr><td onmouseover="this.bgColor='#CCCCFF'" onmouseout="this.bgColor='#FFFFFF'"><a href="#"> Menu2 </a></td></tr>
<tr><td onmouseover="this.bgColor='#CCCCFF'" onmouseout="this.bgColor='#FFFFFF'"><a href="#"> Menu3 </a></td></tr>
<tr><td onmouseover="this.bgColor='#CCCCFF'" onmouseout="this.bgColor='#FFFFFF'"><a href="#"> Menu4 </a></td></tr>
</table>
</div>
<script>
var cursorLeft=0,cursorTop=0;
function cMenu(){
	if(event.button == 2){
		document.getElementById("menu").style.left=event.clientX;
		document.getElementById("menu").style.top=event.clientY;
		document.getElementById("menu").style.display="inline";
		cursorLeft=event.clientX;
		cursorTop=event.clientY;
	}
	if(event.button == 1){
        var menu = document.getElementById("menu");
		if(cursorLeft<event.clientX && event.clientX<(menu.offsetWidth+cursorLeft)){
			if(cursorTop<event.clientY && event.clientY<(menu.offsetHeight+cursorTop)){
				//
			}else{
				menu.style.display="none";
			}
		}else{
			menu.style.display="none";
		}
	}
}
</script>
</BODY>
</HTML>