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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
使用webpack和rollup打包组件库的方法
Feb 25 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
解析argc argv在php中的应用
2013/06/24 PHP
php调用c接口无错版介绍
2014/03/11 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
高三毕业评语
2014/12/31 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技