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 Event学习第八章 事件的顺序
Feb 07 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
Openlayers实现地图全屏显示
Sep 28 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 调试利器debug_print_backtrace()
2012/07/23 PHP
php页面缓存方法小结
2015/01/10 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python实现证件照换底功能
2019/08/20 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
基于Django实现日志记录报错信息
2019/12/17 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
浅析python连接数据库的重要事项
2021/02/22 Python
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
分公司经理岗位职责
2013/11/11 职场文书
求职意向书范文
2014/04/01 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
python四种出行路线规划的实现
2021/06/23 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技