[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]]
你这一说 才知道!
我原以为 IE TT 原来的Maxthon 都一样呢!
分析的很多,不过不全面,另外非常不赞同把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.οnmοusedοwn=c;
</script>[/html]