读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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
js实现模拟购物商城案例
May 18 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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
实例介绍Python中整型
2019/02/11 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
报关专员求职信范文
2014/02/22 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年党支部工作总结
2014/11/13 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Python机器学习之决策树和随机森林
2021/07/15 Javascript