信鸽网

js调出上下文菜单的实例

  作者：bea

本文实例讲述了js调出上下文菜单的实例代码，分享给大家供大家参考，具体如下： 原理 　　当用户点击右键时会触发一个contextmenu事件，默认会触发浏览器的默认的上下文菜单，通过手动阻止这个默认行为，然后再显示自定义的上下文菜单，当用户单击时隐藏这个菜单即可。 代码 1、html <div id="box" style="color:red;width: 100%;height:1000px;" > <div id="left" style="fl

本文实例讲述了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调出上下文菜单的方法，希望对大家的学习有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: