模仿鼠标右击菜单
近期要用到鼠标右击事件，所以花了点时间在写这个函数，具体代码我贴在下面，希望各位高手多多指点，也希望大侠们能给我点建议如何做成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>
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='';
}
<!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>
