读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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue实现div单选多选功能
Jul 16 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获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python 8种必备的gui库
2020/08/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
高中数学教师求职信
2013/10/30 职场文书
植树节口号
2014/06/21 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
初中学习计划书范文
2014/09/15 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Linux中sftp常用命令整理
2022/06/28 Servers