读jQuery之七 判断点击了鼠标哪个键的代码_jquery

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也无能为力。

时间: 2025-01-31 01:40:05

读jQuery之七 判断点击了鼠标哪个键的代码_jquery的相关文章

方法-jQuery如何判断onclick是否触发,从而实现不同的代码?

问题描述 jQuery如何判断onclick是否触发,从而实现不同的代码? 比如:页面加载时,判断onclick是否触发,从而实现数据全部加载还是进行条件查询? 如:后台代码 string key = context.Request.QueryString["Keyword"]; //判断 if (key!=null) { //调用B层的方法从而获取数据库的Dataset ADO.SqlAdo ado = new ADO.SqlAdo(); string sql = "sel

jQuery实现仿微软首页感应鼠标变化滑动窗口效果_jquery

本文实例讲述了jQuery实现仿微软首页感应鼠标变化滑动窗口效果.分享给大家供大家参考.具体如下: 这是一款jQuery仿微软首页感应鼠标变化的滑动窗口,鼠标放上后,窗口会向左拉长,鼠标移走后恢复原样,是在微软官方网站发现的,看了看代码,觉得很容易就扣下来,不敢独享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "

jquery简单实现带渐显效果的选项卡菜单代码_jquery

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

jQuery实现悬浮在右上角的网页客服效果代码_jquery

本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码.分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错.默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售后客服等,可以作为网站快速通道,方便用户进行相应的操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-top-wen-online-demo/ 具体代码如下: <!DOCTYP

jQuery实现带幻灯的tab滑动切换风格菜单代码_jquery

本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g

jQuery实现仿QQ头像闪烁效果的文字闪动提示代码_jquery

本文实例讲述了jQuery实现仿QQ头像闪烁效果的文字闪动提示代码.分享给大家供大家参考,具体如下: jQuery 闪动的文字提示,仿QQ头像闪烁闪动提示,可以用于错误提示或其他吸引用户注意力的场合. shake(ele,cls,times) ele : jQuery Object [object] 要闪动的元素 cls : Class Name [string] 闪动的类 times : Number [Number] 闪动几次 注意,必须调用jQuery1.4.2及以上版本,否则网页下角会提

基于jQuery实现弹出可关闭遮罩提示框实例代码_jquery

jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果演示 关键代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

jQuery模仿阿里云购买服务器选择购买时间长度的代码_jquery

jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段.下面给大家展示下效果图,就什么都明白了,如果大家觉得不错,请参考实现代码. 效果图如下: 代码: <!doctype html> <html lang="en"> <head> <!-- 效果:http://hovertree.com/texiao/jquery// --> <meta charset="UTF-"> <ti

jQuery实现Flash效果上下翻动的中英文导航菜单代码_jquery

本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//