[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]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
