读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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
React简单介绍
May 24 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 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
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
由浅到深了解JavaScript类
2006/09/08 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python3远程监控程序的实现方法
2019/07/15 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Python必须了解的35个关键词
2020/07/16 Python
详解KMP算法以及python如何实现
2020/09/18 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
聚美优品陈欧广告词
2014/03/14 职场文书
竞选村长演讲稿
2014/04/28 职场文书
个人授权委托书范文
2014/09/21 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
mysql sql常用语句大全
2022/06/21 MySQL