读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数组使用调用方法汇总
Dec 08 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
微信小程序 标签传入数据
May 08 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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 多进程 解决难题
2009/06/22 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
jquery each()源代码
2011/02/14 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
Python NumPy库安装使用笔记
2015/05/18 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python爬虫要用到的库总结
2020/07/28 Python
想学画画?python满足你!
2020/12/24 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
金融事务专业求职信
2014/04/25 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年教学工作总结
2014/11/13 职场文书
热爱劳动主题班会
2015/08/14 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
Python&Matlab实现樱花的绘制
2022/04/07 Python