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提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
微信小程序之购物车功能
Sep 23 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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生成静态页的实现方法
2013/05/10 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
让复选框只能选择一项的方法
2013/10/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
前端开发基础javaScript的六大作用
2020/08/06 Javascript
python实现flappy bird小游戏
2018/12/24 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
健康教育评估方案
2014/05/25 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
机电一体化专业求职信
2014/07/22 职场文书
四风自我剖析材料
2014/09/30 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
教师节祝酒词
2015/08/11 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript