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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
JS的反射问题
Apr 07 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
JavaScript函数柯里化
Nov 07 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 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记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python切片知识解析
2016/03/06 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
策划创业计划书
2014/02/06 职场文书
物流专业自荐信
2014/05/23 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
升学宴学生答谢词
2015/01/05 职场文书
幼师自荐信范文
2015/03/06 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
Python开发五子棋小游戏
2022/04/28 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL