读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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 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
5.PHP的其他功能
2006/10/09 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
详解Python的单元测试
2015/04/28 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
管理科学大学生求职信
2013/11/13 职场文书
思想专业自荐信范文
2013/12/25 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
员工团队活动方案
2014/08/28 职场文书
2014年技术员工作总结
2014/11/18 职场文书
学习保证书100字
2015/02/26 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
go语言中json数据的读取和写出操作
2021/04/28 Golang
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript