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 继承实现方法
Aug 26 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
js浮动图片的动态效果
Jul 10 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python配置grpc环境
2019/01/01 Python
如何在django中添加日志功能
2020/02/06 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
小学教学随笔感言
2014/02/26 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
求职个人评价范文
2014/04/09 职场文书
在人间读书笔记
2015/06/30 职场文书