JS入门

鼠标按钮button属性

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

只有在主鼠标按钮被单击时才会触发click事件,因此检测按钮的信息并不是必要的。但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放的按钮。DOM的button属性可能有如下3个值:0表示鼠标按钮,1表示中间的鼠标按钮(鼠标滚轮按钮),2表示次鼠标按钮。在常规设置中,主鼠标按钮就是鼠标左键,而次鼠标按钮就是鼠标左键。

IE也提供了button属性,但这个属性的值与DOM的button属性有很大的差异。

  • 0:表示是没有按下按钮
  • 1:表示按下了鼠标按钮
  • 2:表示按下了次鼠标按钮
  • 3:表示同时按下了主、次鼠标按钮
  • 4:表示按下了中间的鼠标按钮
  • 5:表示同时按下了主鼠标按钮和中间的鼠标按钮
  • 6:表示同时按下了次鼠标按钮和中间的鼠标按钮
  • 7:表示同时按下了三个鼠标按钮

DOM模型下的button属性比IE模型下的button属性更简单也更为实用,因为同时按下多个鼠标按钮的情形十分罕见。最常见的做法就是将IE模型规范化为DOM方式,毕竟除IE之外的其它浏览器都原生支持DOM模型。而对主、中、次按钮的映射并不困难,只要将IE的其它选项分别转换成如同按下这三个按钮中的一个即可(同时将住按钮作为优先选取的对象)。换句话说IE中返回的5和7会被转换成DOM模型中的0.

由于单独使用能力检测无法确定差异,因此必须另辟蹊径。我们知道,支持DOM版鼠标事件的浏览器可以通过hasFearture()方法来检测,所以可以再为EventUtil对象添加如下getButton()方法:

var EventUtil = {
 getEvent: function (event) {
 return event ? event : window.event;
 },
 addHandler: function (element, type, handler) {
 if (element.addEventListener) {
 element.addEventListener(type, handler, false);
 } else if (element.attachEvent) {
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 }
 },
 getButton: function (event) {
 if (document.implementation.hasFeature("MouseEvents", "2.0")) {
 return event.button;
 } else {
 switch (event.button) {
 case 0:
 case 1:
 case 3:
 case 5:
 case 7:
 return 0;
 case 2:
 case 6:
 return 2;
 case 4:
 return 1;
 }
 }
 }
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function (event) {
 event = EventUtil.getEvent(event);
 alert(EventUtil.getButton(event));
});

通过检测“MouseEvents”这个特性,就可以确定event对象中存在的button属性中是否包含正确的值。如果测试失败,说明是IE,就必须对相应的值进行规范化。

在这个例子中,我们为一个<div>元素添加了一个onmousedown事件处理程序。当在这个元素上按下鼠标按钮时,会有警告框显示按钮的代码。

在使用onmouseup事件处理程序时,button的值表示释放的是那个按钮。此外,如果不是按下或释放了主鼠标按钮,Opera不会触发mouseup或mousedown事件。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评
>