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

原理

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

代码

html

<div id="box" style="color:red; 100%;height:1000px;" >
     <div id="left" style="float:left;500px;margin-left: 50px;height:500px;background: #cdeddf;">
                
     </div>        
     <div id="right" style="float:right;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>

js

 1　　 // 添加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";
    });

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