读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中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
layui文件上传实现代码
May 20 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
express 项目分层实践详解
Dec 10 Javascript
Layui 动态禁止select下拉的例子
Sep 03 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
基于mysql的论坛(4)
2006/10/09 PHP
实用函数7
2007/11/08 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
jquery append与appendTo方法比较
2017/05/24 jQuery
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python模拟事件触发机制详解
2018/01/19 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
活动总结的格式
2014/05/07 职场文书
煤矿安全承诺书
2014/05/22 职场文书
支部组织生活会方案
2014/06/10 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
植物园观后感
2015/06/11 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技