[转]国内主流浏览器中左右键事件的分析整理,该怎么解决
日期：2014-05-16 浏览次数：20528 次
[转]国内主流浏览器中左右键事件的分析整理
原文地址：http://www.oncecode.com/Html/Javascript/552.htm
最近做的一个右键菜单的功能，
在TT下失效，
粗略地测试了一下，
发现TT下默认有鼠标右键手势操作页面的功能，
以为右键的事件被TT所劫持，
然而Google的在线doc系统中的右键菜单在TT下也运作正常，
所以就鼠标事件对国内主流浏览进行了详细的测试。
注：
国内主流浏览器(个人观点)包括：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
考虑项目日常应用，测试代码的doctype为：
<!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">
1、左右键事件的判断；
这四款浏览器中鼠标事件对应的event.button的值如下：
浏览器
左键
右键
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
不难看出，
如果判断右键的话，
只有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来用以区分Maxthon、Firefox与IE和TT。
判断左键，可有如下代码：
if (e.button == 1 || (!document.all && e.button == 0)) {
//当左键点击的时候进行如下操作
}
2、左右键事件触发的先后顺序；
各浏览器中鼠标右键事件的触发先后顺序(以下数字从小到大表示触发的先后顺序)：
浏览器
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
无
经过测试发现，
TT和Maxthon中右键的mousedown和mouseup事件，
都是在鼠标松开(mouseup)的时候触发，
但它们也是有先后顺序的，
mousedown先执行，
然后再执行mouseup事件（估计是由于添加了右键手势功能将右键事件进行了修改导致的）。
另外，
TT和Maxthon与IE一样，
右键是不会触发click事件的。
左键TT和Maxthon表现均与IE以及Firefox相同，
各浏览器中鼠标左键事件的触发先后顺序如下图所示：
浏览器
mousedown
mouseup
click
IE
1
2
3
Firefox
1
2
3
TT
1
2
3
Maxthon
1
2
3
有了以上的分析数据，可以帮助我们写出兼容性更好的代码来，
have fun~
-来自重用网
------解决方案--------------------
谢谢LZ分享
------解决方案--------------------
保存一下哦 感谢楼主的整理
------解决方案--------------------
支持～～～～
我马上可能正好用到它。
------解决方案--------------------
UP
------解决方案--------------------
虽然不太懂 还是支持下 呵呵
------解决方案--------------------
好东东
------解决方案--------------------
MARK
------解决方案--------------------
~jF
------解决方案--------------------
------解决方案--------------------
应该让CSDN给你奖分!
------解决方案--------------------
mark
------解决方案--------------------
传说中的主流浏览器了除了FF,都是IE内核.有区别?
------解决方案--------------------
MARK
------解决方案--------------------
原文地址：http://www.oncecode.com/Html/Javascript/552.htm
最近做的一个右键菜单的功能，
在TT下失效，
粗略地测试了一下，
发现TT下默认有鼠标右键手势操作页面的功能，
以为右键的事件被TT所劫持，
然而Google的在线doc系统中的右键菜单在TT下也运作正常，
所以就鼠标事件对国内主流浏览进行了详细的测试。
注：
国内主流浏览器(个人观点)包括：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
考虑项目日常应用，测试代码的doctype为：
<!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">
1、左右键事件的判断；
这四款浏览器中鼠标事件对应的event.button的值如下：
浏览器
左键
右键
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
不难看出，
如果判断右键的话，
只有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来用以区分Maxthon、Firefox与IE和TT。
判断左键，可有如下代码：
if (e.button == 1 || (!document.all && e.button == 0)) {
//当左键点击的时候进行如下操作
}
2、左右键事件触发的先后顺序；
各浏览器中鼠标右键事件的触发先后顺序(以下数字从小到大表示触发的先后顺序)：
浏览器
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
无
经过测试发现，
TT和Maxthon中右键的mousedown和mouseup事件，
都是在鼠标松开(mouseup)的时候触发，
但它们也是有先后顺序的，
mousedown先执行，
然后再执行mouseup事件（估计是由于添加了右键手势功能将右键事件进行了修改导致的）。
另外，
TT和Maxthon与IE一样，
右键是不会触发click事件的。
左键TT和Maxthon表现均与IE以及Firefox相同，
各浏览器中鼠标左键事件的触发先后顺序如下图所示：
浏览器
mousedown
mouseup
click
IE
1
2
3
Firefox
1
2
3
TT
1
2
3
Maxthon
1
2
3
有了以上的分析数据，可以帮助我们写出兼容性更好的代码来，
have fun~
-来自重用网
------解决方案--------------------
谢谢LZ分享
------解决方案--------------------
保存一下哦 感谢楼主的整理
------解决方案--------------------
支持～～～～
我马上可能正好用到它。
------解决方案--------------------
UP
------解决方案--------------------
虽然不太懂 还是支持下 呵呵
------解决方案--------------------
好东东
------解决方案--------------------
MARK
------解决方案--------------------
~jF
------解决方案--------------------
------解决方案--------------------
应该让CSDN给你奖分!
------解决方案--------------------
mark
------解决方案--------------------
传说中的主流浏览器了除了FF,都是IE内核.有区别?
------解决方案--------------------
MARK
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
