支持所有浏览器的右键菜单

写道

<!DOCTYPE html>
<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>

}
.skin {
background:#ffff64;
width : 180px;
border : 1px solid gray;
padding : 2px;
visibility : hidden;
position : absolute;
}
div.menuitems {
margin : 2px 0;
}
div.menuitems a {
color : #000000;
text-decoration : none;
}
div.menuitems:hover {
border:1px solid gray;
width:160px;
background-color : #ffffff;
}
</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>

支持所有浏览器的右键菜单相关推荐

Chrome 插件开发-右键菜单开发实战演示，浏览器页面右键菜单选项设置，插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图浏览器页面右键 ...
修复迅雷在 IE 等浏览器中右键菜单丢失或失效的问题
修复迅雷(Thunder)在 IE 等浏览器中右键菜单丢失或失效的问题
右键菜单无响应_被流氓软件玩坏了？这两个清理工具拯救你凌乱的右键菜单。...
Hello 这里是一周进步我们写了四年近2000篇的干货文章,还分享了许多实用的神器工具,一路以来,感谢大家的支持与陪伴~ 文 / 一周进步 · 安哥拉如果你和我们一样,是一个喜欢在电脑上安装各种 ...
如何在IE右键菜单中添加自定义项
摘要: 最近小鑫参加了名为"微软社区精英计划"的活动,这个活动给这个组织内的成员定期提供免费的最新微软内部培训.而对我们这些成员的要求则是定期地发布有关微软技术的博文和视频,当然这 ...
右键菜单_右键菜单太长会导致电脑卡顿？轻松删除右键菜单无用项
有些人的电脑桌面看起来很整洁有序,结果点一下右键要卡 2秒,弹出来的菜单比脸都长,新建一个文件夹都要找半天. 右键菜单一直是各大软件刷存在感的好地方,因为比起桌面.任务栏和开始菜单,右键菜单使用频 ...
右键计算机没有软件删减,右键菜单太长会导致电脑卡顿？轻松删除右键菜单无用项！...
原标题:右键菜单太长会导致电脑卡顿?轻松删除右键菜单无用项! 有些人的电脑桌面看起来很整洁有序,结果点一下右键要卡 2秒,弹出来的菜单比脸都长,新建一个文件夹都要找半天. 右键菜单一直是各大软件刷存在 ...
react-contexify 右键菜单动态生成
react-contexify右键菜单动态生成如果菜单数量少,并且没有其他地方需要共用菜单列表,建议参考react-contexify的右键菜单属性disabled不起作用此文中处理方法相对快捷 ...
javascript实现自定义右键菜单（绑定鼠标左右键）
文章目录 javascript实现自定义右键菜单思路 1绑定右键函数 2.获取鼠标右键按下位置的x坐标(到左面的距离),y坐标(到上面的距离). 3.获取滚动条向下滚动距离,获取滚动条向左滚动距离 ...
Windows右键菜单美化(适用版本:Win7-Win11)
在我的上篇文章中,只有 0% 的人点了赞咋一人没有啊! 所以如果觉得做的还行的话可以给我点个赞.收个藏,这对我真的很重要!QWQ 祖传前言众所周知, Windows11 整了个新的右键菜单 (而原 ...
百度离线地图添加右键菜单
最近在做百度离线地图相关开发,一个右键菜单功能真是折腾的够呛. 将在线api demo代码原样copy到离线版中,无效,调用的是浏览器的右键菜单. 找了一大堆的资料,屏蔽浏览器右键菜单也罢,还有其他 ...

支持所有浏览器的右键菜单

支持所有浏览器的右键菜单相关推荐

最新文章

热门文章