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

發(fā)布時(shí)間：2022-04-25 15:56:44 來源：億速云閱讀：238 作者：iii 欄目：大數(shù)據(jù)

這篇文章主要介紹了javascript中怎么修改鍵Shift、Ctrl、Alt、Meta事件的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇javascript中怎么修改鍵Shift、Ctrl、Alt、Meta事件文章都會(huì)有所收獲，下面我們一起來看看吧。

鼠標(biāo)事件主要是使用鼠標(biāo)來觸發(fā)的，但在按下鼠標(biāo)時(shí)鍵盤上的某些鍵的狀態(tài)也可以影響到所要采取的操作。這些修改鍵就是 Shift、Ctrl、Alt和 Meta（在 Windows鍵盤中是 Windows鍵，在蘋果機(jī)中是 Cmd 鍵），它們經(jīng)常被用來修改鼠標(biāo)事件的行為。DOM 為此規(guī)定了 4 個(gè)屬性，表示這些修改鍵的狀態(tài)：shiftKey、ctrlKey、altKey 和 metaKey。這些屬性中包含的都是布爾值，如果相應(yīng)的鍵被按下了，則值為 true，否則值為 false。當(dāng)某個(gè)鼠標(biāo)事件發(fā)生時(shí)，通過檢測(cè)這幾個(gè)屬性就可以確定用戶是否同時(shí)按下了其中的鍵。來看下面的例子。
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(","));

});
在這個(gè)例子中，我們通過一個(gè) onclick 事件處理程序檢測(cè)了不同修改鍵的狀態(tài)。數(shù)組 keys 中包含著被按下的修改鍵的名稱。換句話說，如果有屬性值為 true，就會(huì)將對(duì)應(yīng)修改鍵的名稱添加到 keys 數(shù)組中。在事件處理程序的后，有一個(gè)警告框?qū)z測(cè)到的鍵的信息顯示給用戶。
IE9、Firefox、Safari、Chrome和 Opera都支持這 4個(gè)鍵。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>
復(fù)制頁(yè)中代碼存為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;
}
}
};

關(guān)于“javascript中怎么修改鍵Shift、Ctrl、Alt、Meta事件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“javascript中怎么修改鍵Shift、Ctrl、Alt、Meta事件”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

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