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.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
微信小程序block的使用教程
Apr 01 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
三种php连接access数据库方法
2013/11/11 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
python使用PyQt5的简单方法
2019/02/27 Python
总结python中pass的作用
2019/02/27 Python
python3实现绘制二维点图
2019/12/04 Python
python代码xml转txt实例
2020/03/10 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
ORACLE第二个十问
2013/12/14 面试题
就业协议书样本
2014/08/20 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
python Polars库的使用简介
2021/04/21 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
Python数据结构之队列详解
2022/03/21 Python