js调出上下文菜单的实例

 更新时间:2015年12月17日 16:47:57   作者:猿客  
这篇文章主要介绍了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调出上下文菜单的方法,希望对大家的学习有所帮助。

相关文章

  • 微信小程序返回上一级页面的实现代码

    微信小程序返回上一级页面的实现代码

    这篇文章主要介绍了微信小程序返回上一级页面的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JS实现上下左右对称的九九乘法表

    JS实现上下左右对称的九九乘法表

    九九乘法表使用很多种语言都可以实现,本文给大家介绍js使用for、while循环来完成四种对称的九九乘法表,对九九乘法表需要的朋友参考下
    2016-02-02
  • JavaScript制作游戏摇杆方向盘

    JavaScript制作游戏摇杆方向盘

    本文主要介绍了JavaScript制作游戏摇杆方向盘,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2014-04-04
  • JS多文件上传的实例代码

    JS多文件上传的实例代码

    本文通过实例代码给大介绍了js多文件上传的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • 基于滚动条位置判断的简单实例

    基于滚动条位置判断的简单实例

    下面小编就为大家分享一篇基于滚动条位置判断的简单实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 19个很有用的 JavaScript库推荐

    19个很有用的 JavaScript库推荐

    流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能丰富,加上它们众多的插件,几乎能实现任何你需要的功能
    2011-06-06
  • javascript拖拽应用实例(二)

    javascript拖拽应用实例(二)

    这篇文章主要为大家详细介绍了javascript拖拽应用实例,拖拽条拖到底,验证码显示出来,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 基于RequireJS和JQuery的模块化编程——常见问题全面解析

    基于RequireJS和JQuery的模块化编程——常见问题全面解析

    下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • Bootstrap3多级下拉菜单

    Bootstrap3多级下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap3多级下拉菜单的相关资料,需引用bootstrap.min.css和bootstrap.min.css.js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • ES6生成器用法实例分析

    ES6生成器用法实例分析

    这篇文章主要介绍了ES6生成器用法,结合实例形式分析了ECMAScript6中生成器的概念、语法、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04

最新评论