原文地址: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~-来自重用网
在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~-来自重用网
解决方案 »
- js问题,浏览器报错Cannot read property 'id' of undefined
- 小弟最近在学习学习ASP,关于一段JS从数据库调出数据(10万火急)
- 学习javascript
- [ueditor]在ueditor编辑框当前页与图片上传页image.html设置了document.domain后图片上传无法使用
- 怎么样保存<input type=file>这东西
- 如何在点击一个链接的时候,弹出一个confirm?如果点击confirm的确定按纽就新打开一个窗口,按取消就不打开?急急!!!
- 关于JAVA的水波特效问题
- 超简单的面试题,不会做,请各位帮忙!
- 这样是否代表一个变量?
- 求:交替显示两个图片文件的代码(在线等)
- 中转页传递参数的问题
- 请教JS中控件属性style.display='' 与style.display='none' 的区别
呵呵csdn的发帖功能不支持直接复制过来的表格,
所以上面的数据排序有点乱,
可以看看原文,
里面的表格看起来方便一些
传说中的主流浏览器了除了FF,都是IE内核.有区别?之前我没怎么用过TT和遨游2
也是认为它们都是ie内核,
所以应该会一样;但这次遇到问题并详细测试之后,
才发现,
原来TT和遨游2与IE6、IE7确实还是有点区别的:
1、右键点击事件中的e.button不一样,
TT和遨游2独具一别都是0,而其它几款都是2;2、mousedown事件的触发时间不一样,
IE是标准的在鼠标按下的时候触发mousedown事件,
而TT和遨游2都是在松开鼠标的时候触发,
只是它是在mouseup事件之前触发;由于最上面没有编辑好数据的格式,
可参考附图: