鼠标右键菜单demo

转载 2013年12月03日 08:55:19
<html>   
<head>     
    <title>JS实现自定义右键菜单</title>
        <meta http-equiv="content-type" content="text/html; charset=gbk">
        <script src="http://api.51ditu.com/js/ajax.js"></script>
        <style type="text/css">
 #container {
text-align:center;
width : 800px;
height : 600px;
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:add(event);">添加链接</a></div>
                <hr>
                <div class="menuitems"><a href="javascript:returnValue();">关闭链接</a></div>
            </div>
            <div id="container"><p>右键此区域</p></div>
      </body>
</html>

相关文章推荐

鼠标右键菜单demo

  • 2013年12月03日 08:55
  • 3KB
  • 下载

jqery鼠标右键菜单

  • 2013年09月17日 11:33
  • 25KB
  • 下载

duilib进阶教程 -- 改进List控件(3)_支持多选+右键菜单(ctrl,shift, 鼠标滑动框选)

看到很多PC客户端的列表都支持多选,比如PP助手,华为网盘,duilib本身UIList却没有此功能的支持,于是想修改一把,完善这方面的劣势,而且相信用到的这个功能的也不少,尤其在开发文件管理相关的功...
  • xdrt81y
  • xdrt81y
  • 2014年02月28日 18:06
  • 10131

怎么清理鼠标右键菜单

  • 2013年04月05日 10:55
  • 128KB
  • 下载

js自定义鼠标右键菜单

我们在浏览器上点击右键会出现一些经常见的菜单,下面我将介绍如何自定义自己的菜单。 自定义右键菜单 body,ul,li{margin:0;padding:0;} body{font:12px...

鼠标右键菜单管理小工具V1.0

  • 2011年11月07日 15:28
  • 463KB
  • 下载

注册表修改鼠标右键菜单

注册表修改鼠标右键菜单在Windows系统中,只要对着桌面或是文件(夹)单击右键,就会弹出一个快捷菜单,里面有对该文件(夹)的一些常用操作命令,通过右键菜单,可以方便用户对文件的某些操作。不知道你是否...

基于jQuery的自定义鼠标右键菜单

  • 2013年03月16日 11:27
  • 74KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标右键菜单demo
举报原因:
原因补充:

(最多只允许输入30个字)