javascript基础从小白到高手系列一百五十三:鼠标按键

只有在元素上单击鼠标主键(或按下键盘上的回车键)时click 事件才会触发,因此按键信息并
不是必需的。对mousedown 和mouseup 事件来说,event 对象上会有一个button 属性,表示按下或
释放的是哪个按键。DOM为这个button 属性定义了3 个值:0 表示鼠标主键、1 表示鼠标中键(通常
也是滚轮键)、2 表示鼠标副键。按照惯例,鼠标主键通常是左边的按键,副键通常是右边的按键。
IE8 及更早版本也提供了button 属性,但这个属性的值与前面说的完全不同:
 0,表示没有按下任何键;
 1,表示按下鼠标主键;
 2,表示按下鼠标副键;
 3,表示同时按下鼠标主键、副键;
 4,表示按下鼠标中键;
 5,表示同时按下鼠标主键和中键;
 6,表示同时按下鼠标副键和中键;
 7,表示同时按下3 个键。
很显然,DOM定义的button 属性比IE 这一套更简单也更有用,毕竟同时按多个鼠标键的情况很
少见。为此,实践中基本上都以DOM的button 属性为准,这是因为除IE8 及更早版本外的所有主流
浏览器都原生支持。主、中、副键的定义非常明确,而IE 定义的其他情形都可以翻译为按下其中某个
键,而且优先翻译为主键。比如,IE 返回5 或7 时,就会对应到DOM 的0。
额外事件信息
DOM2 Events 规范在event 对象上提供了detail 属性,以给出关于事件的更多信息。对鼠标事
件来说,detail 包含一个数值,表示在给定位置上发生了多少次单击。单击相当于在同一个像素上发
生一次mousedown 紧跟一次mouseup。detail 的值从1 开始,每次单击会加1。如果鼠标在mousedown
和mouseup 之间移动了,则detail 会重置为0。
IE 还为每个鼠标事件提供了以下额外信息:
 altLeft,布尔值,表示是否按下了左Alt 键(如果altLeft 是true,那么altKey 也是true);
 ctrlLeft,布尔值,表示是否按下了左Ctrl 键(如果ctrlLeft 是true,那么ctrlKey 也是
true);
 offsetX,光标相对于目标元素边界的x 坐标;
 offsetY,光标相对于目标元素边界的y 坐标;
 shiftLeft,布尔值,表示是否按下了左Shift 键(如果shiftLeft 是true,那么shiftKey
也是true)。
这些属性的作用有限,这是因为只有IE 支持。而且,它们提供的信息要么没必要,要么可以通过
其他方式计算。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值