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 API学Jquery之一 选择器
Apr 07 Javascript
清空上传控件input file的值
Jul 03 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
vue实现分页加载效果
Dec 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python中运行并行任务技巧
2015/02/26 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python 遍历pd.Series的index和value
2019/11/26 Python
利用python汇总统计多张Excel
2020/09/22 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
客服工作职责
2013/12/11 职场文书
党员示范岗材料
2014/12/19 职场文书
春节晚会开场白
2015/05/29 职场文书
素质教育培训心得体会
2016/01/19 职场文书
离婚协议书范文2016
2016/03/18 职场文书