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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
Banner程序
2006/10/09 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
js自带函数备忘 数组
2006/12/29 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
python中类的一些方法分析
2014/09/25 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
详解python中的模块及包导入
2019/08/30 Python
Python错误的处理方法
2020/06/23 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
SQL面试题
2013/04/30 面试题
为什么要做架构设计
2015/07/08 面试题
传播学毕业生求职信
2013/10/11 职场文书
团日活动总结格式
2015/05/11 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL