读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中定义变量时有无var声明的区别
Aug 18 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
Javascript自定义事件详解
Jan 13 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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 date()日期时间函数详解
2010/05/16 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
jQuery层级选择器实例代码
2017/02/06 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python+django实现简单的文件上传
2016/08/17 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python代码中怎么换行
2020/06/17 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
应付会计岗位职责
2013/12/12 职场文书
大学课外活动总结
2014/07/09 职场文书
暑假安全保证书
2015/02/28 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书