读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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
node thread.sleep实现示例
2018/06/20 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
类如何去实现接口
2013/12/19 面试题
给女朋友的道歉信
2014/01/10 职场文书
餐饮营销方案
2014/02/23 职场文书
培训研修方案
2014/06/06 职场文书
努力工作保证书
2015/02/28 职场文书
高一数学教学反思
2016/02/18 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS