JS实现自定义右键菜单

原文地址为： JS实现自定义右键菜单

在灵图时做的，效果如下

Demo效果图

Demo源码如下

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

转载请注明本文地址： JS实现自定义右键菜单

JS实现自定义右键菜单相关推荐

桌面 html 自定义,【极简壁纸 - 技术分享】html js自定义右键菜单方法
自定义右键菜单极简壁纸2.0 地址: https://bz.zzzmh.cn 目前进度已开发到95% 近期有时间就会分享一下,我在开发过程中用到的一些小技术的简单用法和demo 关于html js右 ...
JS简单实现自定义右键菜单
今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单.  <div id="menu ...
[读码时间] 自定义右键菜单
说明:代码取自网络,CSS中注释为笔者学习时添加,JS中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...
Chrome开发自定义右键菜单实现快速跳转到指定页面
一.背景假设我们在日常的测试过程中,有很多页面需要经常访问,一种方式是我们可以直接把这些页面添加为书签,但这种方式必须记录完整的URL.如果我们有多套环境,比如有测试环境.UAT环境.线上环境,每套 ...
antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...
DevExpress的TreeList实现自定义右键菜单打开文件选择对话框
场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...
关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题...
原文:关于FlexPaper 2.1.2版本二次开发 Logo .打印.搜索.缩略图.添加按钮.js交互.右键菜单等相关问题先废话几句.最近用到文档在线浏览功能,之前用的是print2flash( ...
vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
win10 自定义右键菜单
win10 自定义右键菜单首先使用快捷键 win + r 打开运行窗口,在其中输入 regedit 然后点击确定进入注册表后,按照顺序找到位置: HKEY_LOCAL_MACHINE\SOFTW ...

JS实现自定义右键菜单

JS实现自定义右键菜单相关推荐

最新文章

热门文章