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 中对象的继承〔转贴〕
Jan 22 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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代码
2010/02/16 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
js倒计时显示实例
2016/12/11 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
详解如何运行vue项目
2019/04/15 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python自动安装pip
2014/04/24 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python读取文本中的坐标方法
2018/10/14 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python使用python-docx读写word文档
2019/08/26 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
python使用smtplib模块发送邮件
2020/12/17 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
英文版区域经理求职信
2013/10/23 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
公司授权委托书
2014/10/17 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书