关闭

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

1010人阅读 评论(0) 收藏 举报

捕获鼠标点击事件是通过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">
<href="#" id="add" name="add">删除行</a>
<href="#" id="a1" name="add">插入行</a>
<href="#" id="a2" name="add">删除列</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>

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1667901次
    • 积分:16186
    • 等级:
    • 排名:第663名
    • 原创:309篇
    • 转载:141篇
    • 译文:1篇
    • 评论:275条
    最新评论