读jQuery之七（判断点击了鼠标哪个键）

最新推荐文章于 2021-02-08 23:53:20 发布
最新推荐文章于 2021-02-08 23:53:20 发布
阅读量522 收藏
点赞数
分类专栏： Web 文章标签： jquery button firefox opera safari null
 

读jQuery之七（判断点击了鼠标哪个键）


jQuery丢弃了标准的 button 属性采用 which，这有点让人费解。

which 是Firefox引入的，IE不支持。which的本意是获取键盘的键值(keyCode)。

jQuery中的which即可以是键盘的键值，也可以是鼠标的键值。
即当判断用户按下键盘的哪个键时可以使用which，当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。

源码

?
1
2
3
4
5
6
7
8
9
10
// 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可以表示鼠标按键值，只提到了表示键盘按键值。

源码中的注释也让人误解。

?
1
// Add which for click: 1 === left; 2 === middle; 3 === right

注意这里说的是click ，很容易让人使用click 事件，但实际上click事件中获取是错误的。

下面就用 click  事件试试：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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/8IE9Firefox4Chrome12SafariOpera
点击左键01111(不停弹出alert)1
点击中键不响应2222(不停弹出alert)不响应
点击右键仅弹出右键菜单仅弹出右键菜单3，弹出右键菜单仅弹出右键菜单仅弹出右键菜单仅弹出右键菜单

可以看到使用 click 事件并不能按照jQuery设想的那样左，中，右键对应的1,2,3值。各浏览器下均不一致，且右键根本获取不到，Safari中还不停的弹出alert。

因此，应该使用 mousedown / mouseup 事件则达到jQuery的设想。jQuery的注释误导了人。

此外即使使用 mousedown / mouseup 事件，Opera中也无法获取中键的值。Opera的恶心做法令jQuery也无能为力。

nic7968
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ多个按钮点击，判断是哪一个按钮，以及该按钮的取值
weixin_30307267的博客
04-12 1351
<ul class="priceList" style="margin-top:16px;"> <li><button id="bidPrice1">-100</button><button id="bidPrice2">100</button></li> ...
读jQuery之七 判断点击了鼠标哪个键的代码
12-07
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) ) { ev
jq鼠标按键、键值获取
一只程序媛
03-12 897
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标按键、键值获取</title> <script src="jquery1.1.1.min.js"></script> </head> <body> <div class="btn">按钮</div> <input type="text
jQuery(3)——jQuery键盘事件
练涛
09-29 2509
jQuery键盘事件 - keydown 在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码; - keyup 用户松开某一个按键时触发，与keydown相对，返回键盘代码. - keypress 在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能...
jquery如何区分鼠标左键还是右键点击
dongle705的博客
02-08 156
jquery区分鼠标左键还是右键点击的方法：可以使用【event.which】属性区分右键点击，【event.which】属性返回指定事件上哪个键盘键或鼠标按钮被按下，代码为【switch (event.which)】。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 推荐：jquery视频教程 jquery区分鼠标左键还是右键点击的方法： jquery中可以使用event.which属性区分右键点击。event.which属性返回指定事件上哪个键盘键或鼠标按钮
jQuery鼠标点击下拉显示信息代码
04-07
"jQuery鼠标点击下拉显示信息代码"就是这样一个利用jQuery实现的交互式导航菜单效果，它使得用户可以通过点击图标来获取隐藏的详细信息，提升了用户对网站内容的探索效率。 首先，我们需要理解jQuery的基本概念。...
jQuery判断鼠标进入图片方向代码
04-09
本篇文章将详细讲解如何利用jQuery实现一个功能：判断鼠标进入图片时的方向，并根据该方向显示遮罩效果。 首先，我们需要理解jQuery中的基本事件。在描述中提到的"鼠标移动"，在jQuery中对应的是`mousemove`事件。...
jQuery列表选择鼠标点击切换代码.zip
07-11
本示例“jQuery列表选择鼠标点击切换代码”是针对用户界面交互的一种实现，通常用于创建功能丰富的网页应用。在这个项目中，我们将深入探讨如何使用jQuery来实现一个基于鼠标点击的列表选择器。 首先，让我们解析这...
JQuery 点击按钮获取当前行 某一列的值
热门推荐
word_joke的博客
05-16 1万+
第一：上表：   &lt;table width="50%" height="50%" border="1" bgcolor="yellow" align="center"&gt; &lt;thead&gt;        &lt;tr align="center"&gt;      &lt;th&gt;英雄ID&l
判断鼠标按下时在ie/ff下分别是什么键
E78790602的博客
06-04 129
注意，在IE浏览器里面，要在body元素里面的东西点，像这段代码就只能在输入框那块点击，而在ff下，可以在整个窗口点击都有效果。 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
JQuery(4)---使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同
lovoo的博客
11-26 8239
在JQuery中，我们可以利用mousedown、mouseup来跟踪页面的鼠标按下与释放事件。如何获取鼠标的位置信息呢？事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位置信息，相当于数学坐标系中的xy坐标那样。于是我们可以先用一个全局变量来记录鼠标按下的位置信息，再在鼠标释放的函数里判断按下的位置与释放的位置是否一致，再根据结果做操作。示例代码如下： var x,y;
JQuery监听鼠标点击哪一个按键.
Mr_li_csdn的专栏
07-14 1403
function(e){  alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键  return false;//阻止链接跳转  }
javascript的奇怪的问题，鼠标点击偶数次触发事件，单数次不触发事件
fox_lht的专栏
07-17 2790
编写前台页面的javascipt代码时遇到的奇怪问题，排查了几个小时，一开始抓不到头绪，后来跟踪javascipt代码时，发现该事件被累计触发了，所以一次灵光、一次不灵光，仔细研究代码，发现，每次处理过程中，javascript程序都会在它的父节点注册一回该事件，虽然每次触发时，该元素都被删除了，但是它的父节点记录了该事件，重新出现该元素时，该事件都累计触发，因而造成时灵时不灵的情况。 解决方法
Swift - 点击事件奇偶次判断
gongyuhonglou的博客
05-31 1551
// 按钮点击事件     func onTouchUpInside() {         struct touchUpInside {             static var count: Int = 0         }         touchUpInside.count += 1         print(touchUpInside.count)         if tou
jquery判断鼠标滚轮方向
最新发布
07-13
你可以使用jQuery来判断鼠标滚轮的方向。以下是一种常用的方法： ```javascript var scrollDirection; $(window).on("mousewheel DOMMouseScroll", function(event) { if (event.originalEvent.wheelDelta > 0 ||...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值