模仿鼠标右击菜单

近期要用到鼠标右击事件，所以花了点时间在写这个函数，具体代码我贴在下面，希望各位高手多多指点，也希望大侠们能给我点建议如何做成js封装类，可以通用的函数，这才是我发帖的目的，在此谢过各位指点迷津！
HTML代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>testEvent.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
    
    <style type="text/css">
     .dd{
     width: 200px;
     height: 200px;
     background: #D4D0C8;
     border-top:2px double #e9e9e9;
     border-left:2px double #e9e9e9;
     border-bottom:2px solid #8E8E8E;
     border-right:2px solid #8E8E8E;
     padding:5px 0 0 15px;
     position: absolute;
     z-index: 999;
     }
     #xx div:hover{
     background: #fff;
     cursor: pointer;
     }
    </style>
<script type="text/javascript" src="testEvent.js"></script>
  </head>
  
  <body>

  </body>
</html>
testEvent.js代码:document.onmousedown = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (e.button == 2) {
// alert(document.documentElement.scrollHeight);
document.oncontextmenu = function() {
return false;
};
createDiv(e);
} else {
if (document.getElementById('xx') && target.id != 'xx'
&& target.parentNode.id != 'xx') {
document.getElementById('xx').style.display = 'none';
}
}
};function createDiv(e) {
var _x = e.clientX || e.pageX, _y = e.clientY || e.pageY;
if (!document.getElementById('xx')) {
publicMethod(_x, _y);
} else {
document.body.removeChild(document.getElementById('xx'));
publicMethod(_x, _y);
}
}
function publicMethod(_x, _y) {
var div = document.createElement('div');
div.id = 'xx';
div.className = 'dd';
div.innerHTML = "<div onclick='run(this)' onmouseover='over(this)' onmouseout='out(this)'>菜单一</div><div onclick='run(this)' onmouseover='over(this)' onmouseout='out(this)'>菜单二</div><div onclick='run(this)' onmouseover='over(this)' onmouseout='out(this)'>菜单三</div><div onclick='run(this)' onmouseover='over(this)' onmouseout='out(this)'>菜单四</div>";
document.body.appendChild(div);
if (_x + div.offsetWidth < document.documentElement.scrollWidth
&& _y + div.offsetHeight < document.documentElement.scrollHeight) {
div.style.left = _x;
div.style.top = _y;
} else {
div.style.left = _x - div.offsetWidth;
div.style.top = _y - div.offsetHeight;
}
}function run(xx) {
alert(xx.innerHTML);
}
function over(xx){
xx.style.background = '#0A246A';
xx.style.color='#fff';
}
function out(xx){
xx.style.background = '';
xx.style.color='';
}

解决方案 »

  1.   

    1.代码太复杂，建议菜单div直接html输出，右键让它显示。
    2.菜单的顶应该从点击点的右边显示，而不是上面。应该跟系统右建菜单一样。
    3.至于点击菜单不隐藏菜单，点击其他地方隐藏的判断方法是使用阻止冒泡，而不是像你那样判断对象。
    有空也写写吧
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <title>testEvent.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=GB18030">
        <style type="text/css">
            #menu{
                width: 160px;
                height: 150px;
                padding:10px 0 0 20px;
                margin:0;
                background-color: #D4D0C8;
                border-width:2px;
                border-style:solid;
                border-color: #e9e9e9 #8E8E8E #8E8E8E #e9e9e9;
                position: absolute;
                list-style: none;
                display: none;
                z-index: 999;
            }
            #menu li a{
                height:20px;
                text-decoration: none;
                color: #000;
                display: block;
            }
            #menu li a:hover{
                background-color: #0A246A;
                color:#fff;
            }
        </style>
    </head>
    <body>
    1.在firefox下菜单定位错误
    2.解决在菜单里点击右建又出现菜单bug
    3.选择菜单后，运行完脚本关闭菜单
    4.做成函数，可指定菜单内容
    <ul id="menu">
        <li><a href="javascript:void(0)" onclick="td_run(this)">菜单一</a></li>
        <li><a href="javascript:void(0)" onclick="td_run(this)">菜单二</a></li>
        <li><a href="javascript:void(0)" onclick="td_run(this)">菜单三</a></li>
        <li><a href="javascript:void(0)" onclick="td_run(this)">菜单四</a></li>
    </ul>
    <script type="text/javascript">
        function fun_menu(id){
            document.oncontextmenu=function(){return false};//不要写到下面函数包里
            document.onmousedown=function(e){
                e=e||event;
                if(e.button==2){
                    var x = e.clientX || e.pageX, y = e.clientY || e.pageY;
                    id.style.display="block";
                    id.style.top=y+"px";//必须加px单位，兼容标准浏览器
                    id.style.left=x+"px";
                }else{
                    id.style.display="none";
                }
            };
            id.onmousedown=function(e){
                e=e||event;
                if (window.event) {
                    e.cancelBubble=true;   // ie下阻止冒泡
                } else {
                    e.stopPropagation();     // 其它浏览器下阻止冒泡
                }
                //alert("你点在菜单内，不执行！");
            }
        }
        function td_run(obj){
            alert(obj.innerHTML);
            id.style.display="none";//运行后隐藏菜单
        }
        var id=document.getElementById("menu");//指定菜单内容
        fun_menu(id);//开始调用
    </script>
    </body>
    </html>