读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 页面模板化很多人没有使用过的方法
Jun 05 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 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 的几个配置文件函数
2006/12/21 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python正则表达式指南 推荐
2018/10/09 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python多线程分块读取文件
2019/08/29 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
win10下go mod配置方式
2021/04/25 Golang
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫