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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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的hash算法介绍
2014/02/13 PHP
php多线程并发实现方法
2016/09/30 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
vue axios用法教程详解
2017/07/23 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
极简的Python入门指引
2015/04/01 Python
Python模拟百度登录实例详解
2016/01/20 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Apache部署Django项目图文详解
2019/07/30 Python
Django中create和save方法的不同
2019/08/13 Python
Django之模板层的实现代码
2019/09/09 Python
Python3常见函数range()用法详解
2019/12/30 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python 绘制国旗的示例
2020/09/27 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
yy婚礼主持词
2014/03/14 职场文书
《分一分》教学反思
2014/04/13 职场文书
运动员口号
2014/06/09 职场文书
关于教师节的广播稿
2014/09/10 职场文书
自书遗嘱范文
2015/08/07 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
Hive常用日期格式转换语法
2022/06/25 数据库