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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
js操作select控件的几种方法
Jun 02 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
HTML颜色选择器实现代码
2010/11/23 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Vue.use源码分析
2017/04/22 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
详解python如何引用包package
2020/06/07 Python
Python进行特征提取的示例代码
2020/10/15 Python
python实现图片转字符画的完整代码
2021/02/21 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
物流创业计划书
2014/02/01 职场文书
求职意向书
2014/04/01 职场文书
公司节能减排倡议书
2014/05/14 职场文书