javascript中怎么修改键Shift、Ctrl、Alt、Meta事件

这篇文章主要介绍了javascript中怎么修改键Shift、Ctrl、Alt、Meta事件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇javascript中怎么修改键Shift、Ctrl、Alt、Meta事件文章都会有所收获，下面我们一起来看看吧。

主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站开发、程序开发、微网站、重庆小程序开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的成都网站制作、做网站、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体，具备承接不同规模与类型的建设项目的能力。

鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是 Shift、Ctrl、Alt和 Meta（在 Windows键盘中是 Windows键，在苹果机中是 Cmd 键），它们经常被用来修改鼠标事件的行为。DOM 为此规定了 4 个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和 metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为 true，否则值为 false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。来看下面的例子。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();

if (event.shiftKey){
keys.push("shift");
}

if (event.ctrlKey){
keys.push("ctrl");
}

if (event.altKey){
keys.push("alt");
}

if (event.metaKey){
keys.push("meta");
}

alert("Keys: " + keys.join(","));

});
在这个例子中，我们通过一个 onclick 事件处理程序检测了不同修改键的状态。数组 keys 中包含着被按下的修改键的名称。换句话说，如果有属性值为 true，就会将对应修改键的名称添加到 keys 数组中。在事件处理程序的后，有一个警告框将检测到的键的信息显示给用户。
IE9、Firefox、Safari、Chrome和 Opera都支持这 4个键。IE8及之前版本不支持 metaKey 属性。
<!DOCTYPE html>
<html>
<head>
<title>Modifier Keys Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<div id="myDiv" style="background-color:red;height:100px;width:100px">Click me while holding a modifier key</div>
<script type="text/javascript">
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
</script>
</body>
</html>
复制页中代码存为EventUtil.js文件如下：
var EventUtil = {
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;
}
}
},
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
getEvent: function(event){
return event ? event : window.event;
},
getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
getTarget: function(event){
return event.target || event.srcElement;
},

getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},

setClipboardText: function(event, value){
if (event.clipboardData){
event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
window.clipboardData.setData("text", value);
}
},

stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};

关于“javascript中怎么修改键Shift、Ctrl、Alt、Meta事件”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“javascript中怎么修改键Shift、Ctrl、Alt、Meta事件”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

网站标题：javascript中怎么修改键Shift、Ctrl、Alt、Meta事件
链接分享：https://www.cdcxhl.com/article46/iicceg.html

成都网站建设公司_创新互联，为您提供软件开发、网站营销、虚拟主机、品牌网站设计、标签优化、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容