读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 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
vue实现单选和多选功能
Aug 11 Javascript
js实现简易拖拽的示例
Oct 26 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python多维数组切片方法
2018/04/13 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Django实现文件上传下载
2019/10/06 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
C语言面试题
2015/10/30 面试题
中专生求职自荐信范文
2013/12/22 职场文书
招聘专员岗位职责
2014/03/07 职场文书
篮球比赛策划方案
2014/06/05 职场文书
放飞理想演讲稿
2014/09/09 职场文书
生日寿星公答谢词
2015/09/29 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Redis入门基础常用操作命令整理
2022/06/01 Redis