js调出上下文菜单的实例
2015-12-17 16:47
465 查看
本文实例讲述了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调出上下文菜单的方法,希望对大家的学习有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- 底部Popwindow形式菜单的类的封装
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 一步一步跟我学易语言之第二个易程序菜单设计
- IE右键菜单被修改
- jQuery菜单插件用法实例
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- ASP动态级联菜单实现代码
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- jQuery实现的超酷苹果风格图标滑出菜单效果代码
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效