读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 相关文章推荐
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
微信小程序收藏功能的实现代码
Jun 19 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
读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中计算字符串相似度的函数代码
2012/12/29 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
答题辅助python代码实现
2018/01/16 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Django框架验证码用法实例分析
2019/05/10 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
学雷锋月活动总结
2014/04/25 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
英语复习计划
2015/01/19 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python