国内主流浏览器中左右键事件的分析整理

来源：互联网发布：h5捕鱼源码编辑：程序博客网时间：2024/06/06 06:36

[b]摘要[/b]
在做与鼠标左右键点击相关的功能的时候，如右键菜单，如果考虑不全面的话，可能做出来的功能在IE和Firefox下正常，TT和Maxthon下却不正常，由于国内这两款浏览器也占到了一定的比例，所以我们得想办法兼容它们。

[b]详细内容[/b]
最近做的一个右键菜单的功能，
在TT下失效，
粗略地测试了一下，
发现TT下默认有鼠标右键手势操作页面的功能，
以为右键的事件被TT所劫持，
然而Google的在线doc系统中的右键菜单在TT下也运作正常，
所以就鼠标事件对国内主流浏览进行了详细的测试。

[b]注[/b]：
国内主流浏览器(个人观点)包括：IE、TT、Maxthon、Firefox。
以下所测试的TT和Maxthon均为官方下载的默认安装和配置的版本，
分别为：TT 4.4(70)和Maxthon 3.0.0.103
IE版本：6.0.2900.5512和7.0.5730.13
Firefox：3.0.11

考虑项目日常应用，测试代码的[b]doctype[/b]为：
<!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">

[b]1、左右键事件的判断[/b]；

这四款浏览器中鼠标事件对应的event.button的值如下：
[code]
浏览器    左键             右键
IE       e.button = 1 e.button = 2
Firefox  e.button = 0 e.button = 2
TT       e.button = 1 e.button = 0
Maxthon3 e.button = 0 e.button = 2
Maxthon2 e.button = 1 e.button = 0
[/code]

不难看出，
如果[b]判断右键[/b]的话，
只有TT(Maxthon2和TT类似，估计跟使用的内核一样有关)比较特别，
其它浏览器的event.button的值都是2；
另外，我们知道TT用的是IE的内核，
所以，我们可以如下判断：
if (e.button == 2 || (document.all && e.button == 0)) {
//当右键点击的时候进行如下操作

}

同理，
Maxthon 3是非IE内核(经测试Maxthon3不支持document.all这种形式的dom访问，有人猜测Maxthon3是用的webkit内核)，
所以可以用!document.all来用以区分Maxthon3、Firefox与IE、TT和Maxthon2。
[b]判断左键[/b]，可有如下代码：
if (e.button == 1 || (!document.all && e.button == 0)) {
//当左键点击的时候进行如下操作

}

[b]2、左右键事件触发的先后顺序[/b]；

各浏览器中鼠标[b]右键事件[/b]的触发先后顺序(以下数字从小到大表示触发的先后顺序)：
[code]
浏览器    mousedown          mouseup             click
IE                1                2             无
Firefox          1                2                3
TT             mouseup 1       mouseup 2          无
Maxthon3    mouseup 1       mouseup 2          无
Maxthon2    mouseup 1       mouseup 2          无
[/code]

经过测试发现，
TT和Maxthon中右键的mousedown和mouseup事件，
都是在鼠标松开(mouseup)的时候触发，
但它们也是有先后顺序的，
mousedown先执行，
然后再执行mouseup事件（估计是由于添加了右键手势功能将右键事件进行了修改导致的）。

另外，
TT和Maxthon与IE一样，
右键是不会触发click事件的。

左键TT和Maxthon表现均与IE以及Firefox相同，
各浏览器中鼠标[b]左键事件[/b]的触发先后顺序如下图所示：
[code]
浏览器 mousedown mouseup click
IE          1       2       3
Firefox    1       2       3
TT          1       2       3
Maxthon    1       2       3
[/code]

有了以上的分析数据，可以帮助我们写出兼容性更好的代码来，
have fun~

出处：[url=http://www.oncecode.com]重用网[/url]

[[i] 本帖最后由 lanetan 于 2009-6-28 00:09 编辑 [/i]]

fonqing 发表于 2009-6-26 10:14

你这一说才知道！
我原以为 IE TT 原来的Maxthon 都一样呢！

sunxiaobo2008 发表于 2009-6-26 11:29

分析的很多，不过不全面，另外非常不赞同把Maxthon和TT跟IE区别开，所知的是Maxthon3有自己的内核，Maxthon2/TT/The world等都是IE内核。这样长篇大论的发上来，有点误导人哦:(

以上是本人拙见，不足之处请多多指教。

以下是本人测试结果：
[code]浏览器    左键  右键

IE6       1    2

IE7       1    0

maxthon2    跟系统IE同步

Firefox    1    3

Opera       0    2

Chrome    0    2

Safari    0    2[/code]

测试用代码，可以运行试试看，点击鼠标左右键，看效果：
[html]<script type="text/javascript">
var nav={},s,ua=navigator.userAgent.toLowerCase();
(s = ua.match(/msie ([/d.]+)/)) ? nav.ie = s[1] :
(s = ua.match(/firefox//([/d.]+)/)) ? nav.firefox = s[1] :
(s = ua.match(/chrome//([/d.]+)/)) ? nav.chrome = s[1] :
(s = ua.match(/opera.([/d.]+)/)) ? nav.opera = s[1] :
(s = ua.match(/version//([/d.]+).*safari/)) ? nav.safari = s[1] : 0;
if (nav.ie) document.write('IE: ' + nav.ie);
if (nav.firefox) document.write('Firefox: ' + nav.firefox);
if (nav.chrome) document.write('Chrome: ' + nav.chrome);
if (nav.opera) document.write('Opera: ' + nav.opera);
if (nav.safari) document.write('Safari: ' + nav.safari);
function c(e){
e=window.event||e;
if(nav.ie||nav.chrome||nav.opera||nav.safari){
switch(e.button){
case 1:
alert("IE下鼠标左键");
break;
case 0:
if(nav.ie){alert("IE7.0下鼠标右键");}else if(nav.chrome){alert("Chrome下鼠标左键");}else if(nav.opera){alert("Oprea下鼠标左键");}else if(nav.safari){alert("Safari下鼠标左键");}
break;
case 2:
if(nav.ie){alert("IE6.0下鼠标右键");}else if(nav.chrome){alert("Chrome下鼠标右键");}else if(nav.opera){alert("Oprea下鼠标右键");}else if(nav.safari){alert("Safari下鼠标右键");}
break;
}
}else if(nav.firefox){
  switch(e.which){
  case 1:
  alert("FF下鼠标左键");
  break;
  case 3:
  alert("FF下鼠标右键");
  break;
  }
}
}
document.onmousedown=c;
</script>[/html]