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

原创 2007年09月12日 15:23:00

捕获鼠标点击事件是通过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>

 

相关文章推荐

基于jQuery的自定义鼠标右键菜单

  • 2013年03月16日 11:27
  • 74KB
  • 下载

js自定义鼠标右键菜单

我们在浏览器上点击右键会出现一些经常见的菜单,下面我将介绍如何自定义自己的菜单。 自定义右键菜单 body,ul,li{margin:0;padding:0;} body{font:12px...

ife系列之自定义鼠标右键菜单

ife系列之自定义鼠标右键菜单问题引出:   日常浏览网页时,鼠标右键的菜单栏不可缺少,但在有些项目中需要取消浏览器默认的右键菜单,在指定的区域可以自定义右键菜单栏,来满足实际的需要。今天就探讨一下...

jwplayer 自定义logo已经右键菜单事件

在网上找了很多相关的东西, 大都是去掉logo以及右键菜单,

自定义view点击事件的接口回调

  • 2017年05月01日 13:27
  • 19.72MB
  • 下载

如何实现jquery自定义点击右键菜单显示

jquery自定义点击右键菜单显示其实很简单,只要下载一个smartMenu.js和一个smartMenu.css两个文件之后,将两个文件分别加入到css和js文件夹下面,然后在前台写上以下代码,就可...

QLabel实现自定义点击事件

  • 2015年10月28日 21:54
  • 55KB
  • 下载

HTML5事件——contextmenu 隐藏鼠标右键菜单

在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作可以提供自定义事件。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:捕获鼠标点击事件 做自定义右键菜单
举报原因:
原因补充:

(最多只允许输入30个字)