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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
Vue仿Bibibili首页的问题
Jan 21 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php数组冒泡排序算法实例
2016/05/06 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
javascript实现的listview效果
2007/04/28 Javascript
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python optparse模块使用实例
2015/04/09 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
python中最小二乘法详细讲解
2021/02/19 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
仓库管理制度
2014/01/21 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
赢在中国观后感
2015/06/02 职场文书
答谢酒会主持词
2015/07/02 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js