js中各浏览器中鼠标按键值的差异


Posted in Javascript onApril 07, 2011

W3C DOM-Level-2 定义如下

W3C DOM 写道

During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, one to indicate the middle button if present, and two to indicate the right button. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.

其描述的很明确,0,1,2分别代表左,中,右三个键。以下分别在mousedown,mouseup,click,dbclick中测试。

<p id="p1">Test mousedown</p> 
<p id="p2">Test mouseup</p> 
<p id="p3">Test click</p> 
<p id="p4">Test dbclick</p> 
<script type="text/javascript"> 
function $(id){return document.getElementById(id)} 
var p1 = $('p1'), p2 = $('p2'), p3 = $('p3'), p4 = $('p4'); 
p1.onmousedown = function(e){ 
e = window.event || e; 
alert(e.button); 
} 
p2.onmouseup = function(e){ 
e = window.event || e; 
alert(e.button); 
} 
p3.onclick = function(e){ 
e = window.event || e; 
alert(e.button); 
} 
p4.ondbclick = function(e){ 
e = window.event || e; 
alert(e.button); 
} 
</script>

js中各浏览器中鼠标按键值的差异

即:
IE6/7/8中,mousedown/mouseup 事件中获取左键的值为1,click事件中获取的却是0。
其它浏览器,mousedown/mouseup/click 事件中获取左键值均为0。完全遵循标准。
所有浏览器,dbclick事件中均无法获取

js中各浏览器中鼠标按键值的差异

即:
IE6/7/8中,mousedown/mouseup 事件中获取中键的值为4。
IE6/7中,click事件无法获取中键的值。IE8则可以,但值为0。
Firefox3.6/Chrome7/Safari5中,mousedown/mouseup 事件中获取中键值为1。
Chrome7/Safar5中,click事件也能获取中键值,亦为1。
Opera10中无法获取中键值。

js中各浏览器中鼠标按键值的差异

即:
所有浏览器,mousedown/mouseup事件中均能获取右键值,且都为2。
所有浏览器,click/dbclick事件中均不能获取到右键值。

以上可看到,判断鼠标按下了哪个键 ,应该选择合适的事件 。这里应选mousedown/mouseup。Opera10中仍然无法获取到中键的值,因为Opera压根不触发中键的事件(mousedown,mouseup,click,dbclick)。

以下代码将IE6/7/8的值转换成符合W3C标准的

var ie678 = !-[1,]; 
function getButton(e){ 
var code = e.button; 
var ie678Map = { 
1 : 0, 
4 : 1, 
2 : 2 
} 
if(ie678){ 
return ie678Map[code]; 
} 
return code; 
}
Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 #Javascript
Safari5中alert的无限循环BUG
Apr 07 #Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 #Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 #Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 #Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 #Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 #Javascript
You might like
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php命令行写shell实例详解
2018/07/19 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
页面使用密码保护代码
2013/04/10 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python中的zipfile模块使用详解
2015/06/25 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
党员四风剖析材料
2014/08/27 职场文书
2015年见习期工作总结
2014/12/12 职场文书
满月酒邀请函
2015/01/30 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
企业党建工作总结2015
2015/05/26 职场文书