js实现右键自定义菜单


Posted in Javascript onDecember 03, 2016

本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #menu {
 height: 200px;
 width: 50px;
 border: 1px solid gray;
 background-color: antiquewhite;
 padding: 10px;
 display: none;
 position: absolute;
 }
 
 ul,
 li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 line-height: 40px;
 }
 </style>
 </head>
 
 <body>
 <div id="menu">
 <ul>
 <li>复制</li>
 <li>粘贴</li>
 <li>运行</li>
 <li>工具</li>
 <li>帮助</li>
 </ul>
 </div>
 </body>
 <script type="text/javascript">
 var menu = document.getElementById("menu");
 document.oncontextmenu = function(ev) {
 var oEvent = ev || event;
 //自定义的菜单显示
 menu.style.display = "block";
 //让自定义菜单随鼠标的箭头位置移动
 menu.style.left = oEvent.clientX + "px";
 menu.style.top = oEvent.clientY + "px";
 //return false阻止系统自带的菜单,
 //return false必须写在最后,否则自定义的右键菜单也不会出现
 return false;
 
 }
 //实现点击document,自定义菜单消失
 document.onclick = function() {
 
 menu.style.display = "none";
 }
 </script>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
js实现小窗口拖拽效果
Dec 03 #Javascript
学习vue.js计算属性
Dec 03 #Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
JQuery 动态生成Table表格实例代码
Dec 02 #Javascript
jQuery实现背景滑动菜单
Dec 02 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
GWebs公司笔试题
2012/05/04 面试题
成绩单公证书
2014/04/10 职场文书
《去年的树》教学反思
2014/04/11 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年宣传工作总结
2014/11/18 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
丧事主持词
2015/07/02 职场文书
责任书格式
2019/04/18 职场文书
2019大学生实习报告
2019/06/21 职场文书