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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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编码规范之注释和文件结构说明
2010/07/09 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
Python偏函数实现原理及应用
2020/11/20 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
银行自荐信范文
2013/10/07 职场文书
关于毕业的广播稿
2014/01/10 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
国际贸易求职信
2014/07/05 职场文书
岗位说明书标准范本
2014/07/30 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书