<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现自定义右键菜单</title>
<meta http-equiv="content-type" content="text/htmlcharset=gbk">
<script src="http://api.51ditu.com/js/ajax.js"></script>
<style type="text/css">
#container {
text-align : center
width : 500px
height : 500px
border : 1px solid blue
margin : 0 auto
}
.skin {
width : 100px
border : 1px solid gray
padding : 2px
visibility : hidden
position : absolute
}
div.menuitems {
margin : 1px 0
}
div.menuitems a {
text-decoration : none
}
div.menuitems:hover {
background-color : #c0c0c0
}
</style>
<script>
window.onload = function() {
var container = document.getElementById('container')
var menu = document.getElementById('menu')
/*显示菜单*/
function showMenu() {
var evt = window.event || arguments[0]
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth-evt.clientX
var bottomedge = container.clientHeight-evt.clientY
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge <menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"
else
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px"
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge <menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"
else
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px"
/*设置菜单可见*/
menu.style.visibility = "visible"
LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble)
}
/*隐藏菜单*/
function hideMenu() {
menu.style.visibility = 'hidden'
}
LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble)
LTEvent.addListener(container,"contextmenu",showMenu)
LTEvent.addListener(document,"click",hideMenu)
}
</script>
</head>
<body>
<div id="menu" class="skin">
<div class="menuitems">
<a href="javascript:history.back()">后退</a>
</div>
<div class="menuitems">
<a href="javascript:history.back()">前进</a>
</div>
<hr>
<div class="menuitems">
<a href="http://api.51ditu.com/" target="_blank">地图api</a>
</div>
<div class="menuitems">
<a href="http://www.51ditu.com/traffic/index.html" target="_blank">实时交通</a>
</div>
<div class="menuitems">
<a href="http://www.51ditu.com" target="_blank">地图搜索</a>
</div>
<div class="menuitems">
<a href="http://nav.51ditu.com" target="_blank">驾驶导航</a>
</div>
<hr>
<div class="menuitems">
<a href="http://uu.51ditu.com" target="_blank">灵图UU</a>
</div>
<div class="menuitems">
<a href="http://lushu.51ditu.com" target="_blank">路书下载</a>
</div>
<hr>
<div class="menuitems">
<a href="http://www.lingtu.com" target="_blank">关于本站</a>
</div>
<div class="menuitems">
<a href="http://emap.51ditu.com/link/link.html" target="_bland">友情链接</a>
</div>
</div>
<div id="container">
<p>右键此区域</p>
</div>
</body>
</html>
参考:C#添加鼠标右键方法步骤：
1 选中要添加右键功能的Form或者控件，打开控件的设计页面
2 从工具箱中找到ContextMenuStrip控件，将这个控件拖曳到
Form或者控件的设计页面上。这时系统就会在这个页面下面自动创
建一个contextMenuStrip1控件，如果你想在这个页面添加多个菜
单，那么你也可以拖曳多个这种控件到设计页面上。
3 按照你的要求将这些ContextMenuStrip控件改成你需要的名
称。 然后, 选择需要右键d出菜单的页面，比如你当前编辑的页
面中有一个DataGrid,一个TreeList，而你想分别为这两个控件添
加不同的右键菜单。那么你就可以先选择DataGrid控件，然后在这
个控件的属性中找到ContextMenuStrip属性，点击该属性，系统会
自动查找你拖曳到当前页面的所有ContextMenuStrip控件并将这些
控件罗列在这个属性的下拉菜单中。你可以选择一个你预先定义
好的ContextMenuStrip控件。这样就为这个DataGrid控件设置了右
键菜单。其他控件也使用同样的方法添加。
4 定义你的菜单，在为控件分配完菜单之后，你就可以定义单
个的菜单。这时你可以选中一个ContextMenu控件。系统会自动在
编辑页面的上面现一个可编辑的动态菜单，你可以在为这个菜单添
加菜单项，比如添加一个‘打开’、‘保存’等等。
5 通过上面几步的 *** 作后，在你运行程序的时候，右击这些具
有ContentMenu的控件就会d出一个菜单。在WinForm的大部分控件
中都有一个属性是ContextMenu(上下文菜单控件)。这个属性就是
用来定义鼠标在右击该控件的时候现实那个菜单控件。
ContextMenu控件就是一个菜单控件。
6 为C#添加鼠标右键的菜单添加代码双击菜单即可进入相应的
代码编辑区
这样，C#添加鼠标右键菜单就完成了。
不管用什么开发,实际上最终是要靠生成的客户端代码来完成右键菜单显示的,类似于这样: document.oncontextmenu=function(){ ......//构建并显示你的菜单 return false//别忘了这句,否则会在显示完你的菜单后同时显示默认的菜单 } document.onmousedown=function(){ ......//隐藏菜单 } 菜单项可以是链接,单击以后直接调用需要的页,或者是javascript的一个过程(也可以在这个过程接着触发一个服务端的 *** 作呦)欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）