响应右键按下事件(FF测试完美,IE有点问题)
在需要响应右键按下的html元素加上 οnmοusedοwn="if(event.button == 2) alert('我被右键了!')" 即可.
onmousedown是鼠标按下事件,event.button == 2是鼠标右键按下事件
下面是完整例子(文件以UTF-8编码方式保存):
Test.html
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- onmousedown是鼠标按下事件,event.button == 2是鼠标右键按下事件 -->
<table id-"testTable" border="1" οnmοusedοwn="if(event.button == 2) alert('鼠标右键按下!')">
<tr>
<td>第1列</td>
<td>第2列</td>
<td>第3列</td>
<td>第4列</td>
</tr>
</table>
</body>
</html>
响应右键弹起事件(FF测试完美,IE有点问题)
在需要响应右键弹起的html元素加上 οnmοuseup="if(event.button == 2) alert('鼠标右键弹起!')" 即可.
onmouseup是鼠标弹起事件,event.button == 2是鼠标右键弹起事件
下面是完整例子(文件以UTF-8编码方式保存):
Test.html
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table id-"testTable" border="1" οnmοusedοwn="if(event.button == 2) alert('鼠标右键按下!')" οnmοuseup="if(event.button == 2) alert('鼠标右键弹起!')">
<tr>
<td>第1列</td>
<td>第2列</td>
<td>第3列</td>
<td>第4列</td>
</tr>
</table>
</body>
</html>
自定义响应右键弹起事件(FF测试完美,IE有点问题)
我们知道,每个浏览器都对鼠标右键弹起事件οnmοuseup="if(event.button == 2) // 默认实现)"有一个默认的实现,这个默认实现就是弹出一个设备上下文(contextmenu),例如在IE中,截图如下:
我们有这样的需求, 对鼠标右键弹起事件有自己的实现(例如弹出自己的设备上下文),这首先要屏蔽浏览器对鼠标右键弹起事件默认的实现.具体做法如下:
在需要有上述需求的HTML元素上响应oncontextmenu事件(弹出设备上下文),让浏览器的默认设备上下文失效.
οncοntextmenu= {if (document.all) window.event.returnValue = false;
else event.preventDefault();}//让浏览器都对鼠标右键弹起事件的响应失效
下面是完整例子(文件以UTF-8编码方式保存):
Test.html
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table id="testTable" border="1" οncοntextmenu="if (window.document.all) {window.event.returnValue = false;} else {event.preventDefault();}"
οnmοuseup="if(event.button == 2) window.alert('鼠标右键弹起!')">
<tr>
<td>第1列</td>
<td>第2列</td>
<td>第3列</td>
<td>第4列</td>
</tr>
</table>
</body>
</html>
心得
在IE中,event是window对象的属性,而在FF中不是,在IE中我们可以这样子写window.event,还可以直接写成event,而在FF中只能写成event,为了兼容性和避免不必要的麻烦,无论是在IE还是在FF,都写成event.