[读码时间] 自定义右键菜单

说明：代码取自网络，CSS中注释为笔者学习时添加，JS中的注释为原文所有！

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>自定义右键菜单</title><style>body,ul,li{margin:0;padding:0;}body{font:12px/24px arial;}#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;/*圆角*/list-style-type:none;/*去除样式*/border:1px solid #8f8f8f;/*黑色*/padding:2px;background:#fff;/*白色*/}#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}#menu li a{display:block;color:#333;/*黑色*/background:#fff;padding-left:5px;text-decoration:none;}#menu li.active{background:#999;}#menu li.active a{color:#fff;background:#8f8f8f;}#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;}#menu li em.cur{background-position:0 0;}#menu li em.copy{background-position:0 -24px;}#menu li em.paste{background-position:0 -48px;}</style><script>window.onload = function () {var oMenu = document.getElementById("menu");var aLi = oMenu.getElementsByTagName("li");//加载后隐藏自定义右键菜单
            oMenu.style.display = "none";//菜单鼠标移入/移出样式for (i = 0; i < aLi.length; i++) {//鼠标移入样式
                aLi[i].onmouseover = function () {this.className = "active"};//鼠标移出样式
                aLi[i].onmouseout = function () {this.className = ""}}//自定义菜单
            document.oncontextmenu = function (event) {var event = event || window.event;var style = oMenu.style;style.display = "block";style.top = event.clientY + "px";style.left = event.clientX + "px";return false;};//页面点击后自定义菜单消失
            document.onclick = function () {oMenu.style.display = "none"}};</script>
</head>
<body><center>自定义右键菜单，请在页面点击右键查看效果。</center><ul id="menu"><li><em class="cut"></em><a href="javascript:;">剪切</a></li><li><em class="copy"></em><a href="javascript:;">复制</a></li><li><em class="paste"></em><a href="javascript:;">粘贴</a></li></ul>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/sx00xs/p/6488012.html

[读码时间] 自定义右键菜单相关推荐

java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...
Chrome开发自定义右键菜单实现快速跳转到指定页面
一.背景假设我们在日常的测试过程中,有很多页面需要经常访问,一种方式是我们可以直接把这些页面添加为书签,但这种方式必须记录完整的URL.如果我们有多套环境,比如有测试环境.UAT环境.线上环境,每套 ...
桌面 html 自定义,【极简壁纸 - 技术分享】html js自定义右键菜单方法
自定义右键菜单极简壁纸2.0 地址: https://bz.zzzmh.cn 目前进度已开发到95% 近期有时间就会分享一下,我在开发过程中用到的一些小技术的简单用法和demo 关于html js右 ...
JS简单实现自定义右键菜单
今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单.  <div id="menu ...
antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...
DevExpress的TreeList实现自定义右键菜单打开文件选择对话框
场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
win10 自定义右键菜单
win10 自定义右键菜单首先使用快捷键 win + r 打开运行窗口,在其中输入 regedit 然后点击确定进入注册表后,按照顺序找到位置: HKEY_LOCAL_MACHINE\SOFTW ...
javascript实现自定义右键菜单（绑定鼠标左右键）
文章目录 javascript实现自定义右键菜单思路 1绑定右键函数 2.获取鼠标右键按下位置的x坐标(到左面的距离),y坐标(到上面的距离). 3.获取滚动条向下滚动距离,获取滚动条向左滚动距离 ...

[读码时间] 自定义右键菜单

[读码时间] 自定义右键菜单相关推荐

最新文章

热门文章