如何做右键菜单-JavaSript-爱易网页

如何做右键菜单

日期：2014-05-16　浏览次数：20344 次

怎么做右键菜单？
我想做个右键菜单，在右击某个class的div的时候就弹出菜单，不知道怎么弄？

------解决方案--------------------
直接找jquery在context插件吧，不需要自己研发，人家已经做得很好了

http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html
------解决方案--------------------

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        body
        {
            background: #222;
            font: 14px 'Microsoft Yahei' , Arial;
        }
        ul, li
        {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a
        {
            text-decoration: none;
            color: #000;
        }
        #wrap
        {
            width: 800px;
            height: 550px;
            border: 1px solid #FF9C00;
            background: #F0E6AF;
            position: relative;
            margin: .5em auto;
        }
        #wrap ul
        {
            background: #eee;
            border: 1px solid #999;
            width: 150px;
            position: absolute;
            display: none;
            -moz-box-shadow: 3px 3px 9px #999;
            -webkit-box-shadow: 3px 3px 9px #999;
            -o-box-shadow: 3px 3px 9px #999;
            box-shadow: 3px 3px 9px #999;
        }
        #wrap ul li
        {
            border-bottom: 1px solid #ddd;
            line-height: 24px;
        }
        #wrap li.no
        {
            border-bottom: none;
        }
        #wrap ul li a
        {
            display: block;
            padding-left: .5em;
        }
        #wrap ul li a:hover
        {
            background-color: #FFBD00;
        }
    </style>

    <script type="text/javascript"> 
    function $(id) { 
        return document.getElementById(id); 
    }; 

    var EventUnit = {addHandler: 
        function(element, type, handler) {//添加事件处理程序 
            if(element.addEventListener) { 
                element.addEventListener(type, handler, false); 
            } else if(element.attachEvent) { 
                element.attachEvent('on' + type, handler); 
            } else { 
                element['on' + type] = handler; 
            }; 
        }, 
        getEvent: function(event) { 
            return event ? event : window.event; 
        }, 
        preventDefault: function(event) {//取消事件默认动作 
            if(event.preventDefault) { 
                event.preventDefault(); 
            } else { 
                event.returnValue = false; 
            }; 
        } 
    } 

    EventUnit.addHandler(window, 'load', function() { 
        var wrap = $('wrap'); 
        var menu = $('menu'); 
        var menuStyle = menu.style.display; 
        var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; 
        var w = 0, h = 0; 
        var left = 0, top = 0; 

        EventUnit.addHandler(wrap, 'contextmenu', function(event) { 
            event = EventUnit.getEvent(event); 
            EventUnit.preventDefault(event); 

        menu.style.display = 'block'; 
        w = menu.clientWidth; 
        h = menu.clientHeight; 
        left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; 
        top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; 
        menu.style.left = left + 'px'; 
        menu.style.top = top + 'px'; 
    }); 

    EventUnit.addHandler(document, 'click', function() { 
        menu.style.display = menuStyle; 
    }); 
}); 
    </script>

</head>
<body>
    <div id="wrap">
        <p>
            单击右键看效果~</p>
        <ul id="menu&quo

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何做右键菜单

相关资料更多>

推荐阅读更多>