请问如何实现鼠标右键点击不同区域，弹出不同的菜单？

div1.oncontextmenu = func1;
div2.oncontextmenu = func2;
这不就是不同的菜单嘛要是没有用来划分区域的对象, 也可以判断鼠标指针位置

解决方案 »

  1.   

    简单写了一个,根据触发事件的对象ID来判断显示不同菜单.
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #area1{
    position:absolute; top:100px; left:100px; background:#FFF;
    width:300px; height:200px; border:1px solid #444;
    }
    #area2{
    position:absolute; top:100px; left:500px; background:#FFF;
    width:200px; height:200px; border:1px solid #C00;
    }
    .menu{
    width:200px; background:#EEE; border:1px solid #006699; 
    position:absolute; display:none;
    }
    a{
    color:#006699; text-decoration:none;
    }
    .menu a{
    display:block; padding:5px;
    }
    .menu a:hover{
    background:#006699; color:#FFFFFF; 
    }
    </style>
    <script type="text/javascript">
    function $(id){
    return document.getElementById(id);
    }
    window.onload = function(){
    document.oncontextmenu = function(oEvent){
    var target, x, y, menu;
    if(window.event){
    target = event.srcElement;
    x = event.x;
    y = event.y;
    }else{
    target = oEvent.target;
    x = oEvent.pageX;
    y = oEvent.pageY;
    }
    if(target.id == "area1"){
    menu = $("menu1");
    $("menu2").style.display = "none";
    }else if(target.id == "area2"){
    menu = $("menu2");
    $("menu1").style.display = "none";
    }
    if(menu){
    menu.style.left = x + "px";
    menu.style.top = y + "px";
    menu.style.display = "block";
    }

    return false;
    };

    document.onclick = function(){
    $("menu1").style.display = "none";
    $("menu2").style.display = "none";
    };
    };
    </script>
    </head><body>
    <div id="area1">
    </div>
    <div id="area2">
    </div>
    <div id="menu1" class="menu">
    <a href="#" onclick="alert('1111');">11111</a>
        <a href="#">22222222</a>
    </div>
    <div id="menu2" class="menu">
    <a href="#">33333333</a>
        <a href="#">44444444</a>
    </div>
    </body>
    </html>