捕获鼠标点击事件 做自定义右键菜单

捕获鼠标点击事件是通过event.button来实现的:

可能值	含义	可能值	含义
0	没按键	1	按左键
2	按右键	3	按左和右键
4	按中间键	5	按左和中间键
6	按右和中间键	7	按所有的键

下面的代码实现了一个在table中自定义的右键菜单:

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 >
< script > ...
    
   document.onmousedown=showMenu;
function showMenu()
    ...{
        var obj=event.srcElement;
        //alert(obj);
        if(obj.tagName=="TD" || obj.tagName=="TABLE")
        ...{
            if(event.button==2)//如果点击鼠标右键就显示菜单
            ...{

                document.getElementById("menu").style.display='';
                document.getElementById("menu").style.left=event.x;
                document.getElementById("menu").style.top=event.y;
             }
             if(event.button==1)//如果点击鼠标左键菜单消失
             ...{

                document.getElementById("menu").style.display='none';
             }
        }
    }
script >
head >
< body >
< div  id ="menu"  style ="display:none; width:50px; height:100px; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 99; FILTER: alpha(opacity=80); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff" >
< a  href ="#"  id ="add"  name ="add" > 删除行 a >
< a  href ="#"  id ="a1"  name ="add" > 插入行 a >
< a  href ="#"  id ="a2"  name ="add" > 删除列 a >
< a  href ="#"  id ="a3"  name ="add" > 插入列 a >
div >
< table  id ="tb1"  border ="1"  oncontextmenu ="return(false)"  onmousedown ="showMenu()" >
< tr >
< td  height ="50px"   >
fdsafafsad
td >
< td  height ="50px" >
fafafafafdafds
td >
< td  height ="50px" >
fafafafafdafds
td >
tr >
< tr >
< td  height ="50px" >
aaaaaaaaaaaaaaaaa
td >
< td  height ="50px" >
bbbbbbbbbbbbbbbbbb
td >
< td  height ="50px" >
fafafafafdafds
td >
tr >
table >
body >
html >