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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
vue2单元测试环境搭建
May 24 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JS实现手写 forEach算法示例
Apr 29 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
thinkPHP模型初始化实例分析
2015/12/03 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
图解js图片轮播效果
2015/12/20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
jQuery插件jsonview展示json数据
2018/05/26 jQuery
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
vue实例的选项总结
2020/06/09 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Django实现分页显示效果
2019/10/31 Python
Python几种常见算法汇总
2020/06/02 Python
Python如何合并多个字典或映射
2020/07/24 Python
基于Python实现简单学生管理系统
2020/07/24 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
法院先进个人事迹材料
2014/05/04 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
党员三严三实心得体会
2014/10/13 职场文书
二年级学生期末评语
2014/12/26 职场文书
颐和园英文导游词
2015/01/30 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
二婚主持词
2015/06/30 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang