鼠标右键菜单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

http://blog.csdn.net/quarryman/article/details/8450387 代码一:点击时显示坐标,鼠标移动时不显示。 #include #include...
  • l297969586
  • l297969586
  • 2016年08月22日 14:42
  • 148

Unity 实现鼠标拖动3D物体

这篇博客实现一个小功能,通过鼠标拖动3D物体。我们知道,如果是拖动 UIUG 的控件的话,它是有接口可以使用的。但是3D物体就没有可直接使用的接口(或者说我没找到?),就需要我们自己写代码。既然如此,...
  • u014230923
  • u014230923
  • 2016年06月03日 23:41
  • 742

javascript 鼠标事件总结

原文转自: javascript的鼠标事件是个比较庞大的家族。需要的朋友可以参考下。...
  • sinolzeng
  • sinolzeng
  • 2014年10月10日 08:30
  • 1243

osgearth各个例子功能概述

最近在学习osgearth,对其还不是很理解,有些例子不会运行,有些可以,把可以的做个统计,以备后面查用。 1、osgearth_graticule:生成经纬线。 2、osgearth_annotat...
  • J1101460678
  • J1101460678
  • 2016年03月09日 14:53
  • 3164

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari ...
  • natalie86
  • natalie86
  • 2015年02月05日 09:56
  • 410

Unity 3D - 鼠标拖动物体Demo

Unity 3D - 鼠标拖动物体Demo :using System.Collections; using System.Collections.Generic; using UnityEngine...
  • yu__jiaoshou
  • yu__jiaoshou
  • 2017年05月22日 15:08
  • 195

TuioDemo程序二刷

终于明白,程序还是要调试才能看懂,加了几句输出语句,就能大概清楚什么时候调用什么函数。 上一次看出来了,run()这个函数是每一帧都会刷新调用一下,并且再run()中的drawObjects(); ...
  • u011310341
  • u011310341
  • 2016年09月22日 12:59
  • 554

[js点滴]JavaScript之拖拽事件06

拖拉事件拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。拖拉的对象有好几种,包括Element节点、图片、链接、选中的文字等等。在HTML网页中,除了...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年11月13日 14:27
  • 3376

原创鼠标拖动实现DIV排序

对比传统的排序,这是一个很不错的尝试,希望对大家有启发。只有我们敢于尝试,总会有意想不到的收获。...
  • littlebo01
  • littlebo01
  • 2013年10月12日 16:53
  • 4119

使用SDL编写一个拖动开关点亮灯泡的程序

对于SDL我也只是一个初学的菜鸟,接下来和大家分享一个我自己写的拖动开关点亮灯泡的一个C++程序。 如果你同样是一个SDL的初学者,那么推荐给你一个连接:http://adolfans.github....
  • qq_29883591
  • qq_29883591
  • 2016年10月04日 22:14
  • 1825
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标右键菜单demo
举报原因:
原因补充:

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