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在事件监听方面的兼容性小结
Apr 07 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Vue组件化开发思考
Feb 02 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
SSM VUE Axios详解
Oct 05 Vue.js
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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
Django 中 cookie的使用
2017/08/17 PHP
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
详解JavaScript树结构
2017/01/09 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
利用Python破解验证码实例详解
2016/12/08 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python实现猜数字小游戏
2020/03/24 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
美工的岗位职责
2013/11/14 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
小学教师岗位职责
2015/04/02 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书