一个调出上下文菜单的实例

原理

　　当用户点击右键时会触发一个contextmenu事件，默认会触发浏览器的默认的上下文菜单，通过手动阻止这个默认行为，然后再显示自定义的上下文菜单，当用户单击时隐藏这个菜单即可。

代码

html

 1 <div id="box" style="color:red;width: 100%;height:1000px;" >
 2      <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;">
 3                 
 4      </div>        
 5      <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;">
 6      </div>
 7         <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;">
 8             <li>按钮1</li>
 9             <li>按钮2</li>
10             <li>按钮3</li>
11        </ul>
12 </div>

js

 1　　 // 添加contextmenu事件
 2     var right = document.getElementById("right");
 3     EventUtil.addEventListener(right, "contextmenu", function(event) {
 4         event = EventUtil.getEvent(event);
 5         EventUtil.preventDefault(event);
 6         var menu = document.getElementById("menu");
 7         
 8         // 获取鼠标右击时的坐标，并设置上下文菜单出现位置
 9         page = EventUtil.getPagePosition(event); 
10         menu.style.left = page.pageX + "px";
11         menu.style.top = page.pageY + "px";
12         menu.style.visibility = "visible";
13     });
14     
15     // 添加隐藏上下文菜单事件
16     EventUtil.addEventListener(document, "click", function(event) {
17         var menu = document.getElementById("menu");
18         menu.style.visibility = "hidden";
19     });

PS:代码出现的EventUtil在”跨浏览器的事件侦听器和事件对象“这篇文章有介绍。链接：http://www.cnblogs.com/yuanke/p/5045821.html

 

posted @ 2015-12-16 14:48  猿客  Views(936)  Comments(0)  Edit  收藏  举报