你的位置:首页 > Java教程

[Java教程]一个调出上下文菜单的实例


原理

  当用户点击右键时会触发一个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