JS入门

shiftKey、ctrlKey、altKey和metaKey修改键

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

虽然鼠标事件主要是使用鼠标来触发的,但在按下鼠标键盘上的某些键的状态也可以影响到所要采取的操作。这些操作键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键),它们将常被用来修改鼠标事件的行为。

DOM为此规定了4个属性,表示这些修改的状态:shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true,否则为false。当某个鼠标事件发生时,通过检测这几个属性就可以确定用于是否按下了其中的键。来看下面的例子:

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));
});

在这个例子中,我们通过一个onclik事件处理程序检测了不同修改键的状态。数组keys中包含着被按下的修改键的名称。换句话说,如果有属性值为true,就会将对应修改键的名称添加到keys数组中。在事件处理程序的最后,有一个警告框将检测到键的信息显示给用于。

Firefox、Safari、Chrome和Opera都支持这4个键。IE不支持metaKey属性。

 

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

网友点评