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 相关文章推荐
js DOM的学习笔记
Dec 22 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
详解Vue CLI3配置解析之css.extract
Sep 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直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
python字符串的方法与操作大全
2018/01/30 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
航空大学应届生求职信
2013/11/10 职场文书
大一期末自我鉴定
2013/12/13 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
安全生产承诺书范文
2014/05/22 职场文书
2014教师研修学习体会
2014/07/08 职场文书
三八妇女节慰问信
2015/02/14 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
实验室安全管理制度
2015/08/05 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android