js调出上下文菜单的实例


Posted in Javascript onDecember 17, 2015

本文实例讲述了js调出上下文菜单的实例代码,分享给大家供大家参考,具体如下:

原理

当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可。
代码
1、html

<div id="box" style="color:red;width: 100%;height:1000px;" >
 <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;">
  
 </div> 
 <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;">
 </div>
 <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;">
  <li>按钮1</li>
  <li>按钮2</li>
  <li>按钮3</li>
 </ul>
</div>

2、js

// 添加contextmenu事件
 var right = document.getElementById("right");
 EventUtil.addEventListener(right, "contextmenu", function(event) {
 event = EventUtil.getEvent(event);
 EventUtil.preventDefault(event);
 var menu = document.getElementById("menu");
 
 // 获取鼠标右击时的坐标,并设置上下文菜单出现位置
 page = EventUtil.getPagePosition(event); 
 menu.style.left = page.pageX + "px";
 menu.style.top = page.pageY + "px";
 menu.style.visibility = "visible";
 });
 
 // 添加隐藏上下文菜单事件
 EventUtil.addEventListener(document, "click", function(event) {
 var menu = document.getElementById("menu");
 menu.style.visibility = "hidden";
 });

代码出现的EventUtil在这篇文章有介绍: 《js跨浏览器的事件侦听器和事件对象的使用方法》

以上就是本文的全部内容,教大家js调出上下文菜单的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 #Javascript
JSONObject使用方法详解
Dec 17 #Javascript
JS实现alert中显示换行的方法
Dec 17 #Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 #Javascript
jQuery实现进度条效果代码
Dec 17 #Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 #Javascript
javascript日期格式化方法小结
Dec 17 #Javascript
You might like
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
民族团结先进个人事迹材料
2014/06/02 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Python基于百度API识别并提取图片中文字
2021/06/27 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js
教你如何用cmd快速登录服务器
2022/06/10 Servers