读jQuery之七 判断点击了鼠标哪个键的代码


Posted in Javascript onJune 21, 2011

jQuery丢弃了标准的 button 属性采用 which,这有点让人费解。

which 是Firefox引入的,IE不支持。which的本意是获取键盘的键值(keyCode)。

jQuery中的which即可以是键盘的键值,也可以是鼠标的键值。
即当判断用户按下键盘的哪个键时可以使用which,当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。
源码

// Add which for key events 
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) { 
event.which = event.charCode != null ? event.charCode : event.keyCode; 
} // Add which for click: 1 === left; 2 === middle; 3 === right 
// Note: button is not normalized, so don't use it 
if ( !event.which && event.button !== undefined ) { 
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); 
}

标准的button采用0,1,2表示鼠标的左,中,右键。jQuery的which则使用用1,2,3。

还有一点让人不爽的是jQuery文档 event.which 中并没有提到which可以表示鼠标按键值,只提到了表示键盘按键值。

源码中的注释也让人误解。

// Add which for click: 1 === left; 2 === middle; 3 === right

注意这里说的是click ,很容易让人使用click 事件,但实际上click事件中获取是错误的。
下面就用 click 事件试试:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script src="http://code.jquery.com/jquery-1.6.1.js"></script> 
<script type="text/javascript"> 
$(document).click(function(e){ 
alert(e.which); 
}) 
</script> 
</head> 
<body> 
</body> 
</html>

测试结果
IE6/7/8 IE9 Firefox4 Chrome12 Safari Opera
点击左键 0 1 1 1 1(不停弹出alert) 1
点击中键 不响应 2 2 2 2(不停弹出alert) 不响应
点击右键 仅弹出右键菜单 仅弹出右键菜单 3,弹出右键菜单 仅弹出右键菜单 仅弹出右键菜单 仅弹出右键菜单

可以看到使用 click 事件并不能按照jQuery设想的那样左,中,右键对应的1,2,3值。各浏览器下均不一致,且右键根本获取不到,Safari中还不停的弹出alert。

因此,应该使用 mousedown / mouseup 事件则达到jQuery的设想。jQuery的注释误导了人。

此外即使使用 mousedown / mouseup 事件,Opera中也无法获取中键的值。Opera的恶心做法令jQuery也无能为力。

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 #Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 #Javascript
读jQuery之五(取DOM元素)
Jun 20 #Javascript
读jQuery之四(优雅的迭代)
Jun 20 #Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
You might like
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
基于iview的router常用控制方式
2019/05/30 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
详解Python的单元测试
2015/04/28 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python ansible服务及剧本编写
2017/12/29 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
思想工作总结范文
2015/08/12 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS