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

原创 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>

 

HTML中自定义右键菜单功能

我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现原理和实现代码。     实现...
  • fwj380891124
  • fwj380891124
  • 2013年05月10日 17:01
  • 6430

配置jstree右键菜单

我见过一个例子网上展示如何自定义jstree的右键(使用插件)的外观。 例如,允许删除“,而不是”文件夹“(通过隐藏”从对文件夹中删除“选项)。 现在,我找不到那个例子。任何人都可以在正确的方向?官方...
  • ceoshun
  • ceoshun
  • 2014年08月18日 13:16
  • 6263

jQuery自定义元素右键点击事件

大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进、右键后退。第一步我们要屏蔽浏览器默认的右...
  • u014291497
  • u014291497
  • 2016年08月21日 15:45
  • 15254

Flex屏蔽并自定义鼠标右键菜单

最近手头有个项目需要屏蔽Flex鼠标右键菜单并自定义新的flex鼠标右键菜单。通过ContextMenu hideBuiltInItems,还是达不到我要的效果,那该死的几个选项还是存在,在网上搜刮了...
  • worldspark
  • worldspark
  • 2013年02月26日 16:10
  • 194

js自定义鼠标右键菜单

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

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

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

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

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

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

在网上找了很多相关的东西, 大都是去掉logo以及右键菜单,
  • zapperstab
  • zapperstab
  • 2014年05月06日 18:04
  • 1015

android自定义控件实现左右划出菜单并添加点击事件

public class SwipeItemView extends View { public SwipeItemView(Context context) { super(...
  • DonMoses
  • DonMoses
  • 2016年02月19日 23:52
  • 933

js屏蔽鼠标右键默认事件以实现自定义菜单

2017-12-18日,2017年即将结束的日子里。 公司做了一个项目,主要难点在于实现公司组织架构图上,何谓组织架构图,如下便是: 这里的每个节点都有相应的右键菜单,说白了就跟你...
  • qq_16371909
  • qq_16371909
  • 2017年12月18日 19:00
  • 87
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:捕获鼠标点击事件 做自定义右键菜单
举报原因:
原因补充:

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