js调出上下文菜单的实例
本文实例讲述了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调出上下文菜单的方法，希望对大家的学习有所帮助。
相关推荐
-
JS嵌套函数调用上下文的问题解决
复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script> var stu ={ m: function(){ var self = this; console.log(this === stu); //
-
js bind 函数 使用闭包保存执行上下文
复制代码 代码如下: window.name = "the window object" function scopeTest() { return this.name; } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: fu
-
js 实现菜单上下显示附效果图
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
js调出上下文菜单的实例
本文实例讲述了js调出上下文菜单的实例代码,分享给大家供大家参考,具体如下: 原理 当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可. 代码 1.html <div id="box" style="color:red;width: 100%;height:1000px;" > <div id="left"
-
Android上下文菜单用法实例分析
本文实例讲述了Android上下文菜单用法.分享给大家供大家参考.具体如下: 上下文菜单不同于选项菜单,选项菜单服务于Activity,而上下文菜单则是注册到某个View对象上的. 如果一个View对象注册了上下文菜单,用户可以通过长按该View对象以呼出上下文菜单. 上下文菜单不支持快捷键,其菜单选项也不能附带图标,但是可以为上下文菜单的标题指定图标. 以下模拟上下文菜单 main.xml布局文件: <?xml version="1.0" encoding="utf-
-
js 三级关联菜单效果实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
-
js实现收缩菜单效果实例代码
废话不多说,直接上代码: 有注释 复制代码 代码如下: <head> <title></title> <style type="text/css"> div { border: 1px solid black; width: 100px; } ul .tit, .content { list-
-
js左侧三级菜单导航实例代码
效果演示: 实例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lan
-
vue.js 左侧二级菜单显示与隐藏切换的实例代码
废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type
-
vue.js+element-ui动态配置菜单的实例
如下所示: <!--导航菜单-折叠功能--> <aside :class="collapsed?'menu-collapsed':'menu-expanded'"> <!--单个激活 并以 index 作为 path 进行路由跳转--> <el-menu unique-opened router v-show="!collapsed"> <!--动态路由到子组件 将不可见的路径隐藏--> <templ
-
通过实例了解JS执行上下文运行原理
壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出 听风是风,再输出 echo才对,很遗憾,两次输出均为 echo:如果我们将上述代码中的函数声明改为函数表达式,结
-
vue2.0的contextmenu右键弹出菜单的实例代码
整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享. 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>
-
js实现类似菜单风格的TAB选项卡效果代码
本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht