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 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 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中unserialize返回false的解决方法
2014/09/22 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php的扩展写法总结
2019/05/14 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python连接mongodb密码认证实例
2018/10/16 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
元旦晚会邀请函
2014/01/27 职场文书
总经理工作职责范文
2014/03/14 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
离婚协议书怎么写
2015/01/26 职场文书
python文件目录操作之os模块
2021/05/08 Python