caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開發(fā)_APP開發(fā),低調(diào)、敢創(chuàng)新、有情懷!
南昌百恒網(wǎng)絡(luò)微信公眾號 掃一掃關(guān)注
小程序
tel-icon全國服務(wù)熱線:400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號
掃一掃打開百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

javascript中修改鍵Shift、Ctrl、Alt、Meta事件判斷方法

百恒網(wǎng)絡(luò) 2016-12-21 5152

雖然組合鍵即修改鍵在當(dāng)前的網(wǎng)頁中操作不是很常見,但有些快捷操作我們還是會(huì)偶爾用到的,所以在此以一個(gè)簡短的篇幅進(jìn)行介紹。
? ? ? ?鼠標(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í),通過檢測這幾個(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 事件處理程序檢測了不同修改鍵的狀態(tài)。數(shù)組 keys 中包 含著被按下的修改鍵的名稱。換句話說,如果有屬性值為 true,就會(huì)將對應(yīng)修改鍵的名稱添加到 keys 數(shù)組中。在事件處理程序的后,有一個(gè)警告框?qū)z測到的鍵的信息顯示給用戶。?
? ? ? ?南昌app開發(fā)公司百恒網(wǎng)絡(luò)開發(fā)工程師提配大家,IE9、Firefox、Safari、Chrome和 Opera都支持這 4個(gè)鍵。IE8及之前版本不支持 metaKey 屬性。?

? ? ? ?


Modifier Keys Example



Click me while holding a modifier key




復(fù)制頁中代碼存為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;
}
}
? ? ? ?};

? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.gimmickmag.com/如轉(zhuǎn)載請注明出處!

400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號
掃一掃打開百恒網(wǎng)絡(luò)小程序

歡迎您的光顧,我們將竭誠為您服務(wù)×

售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售后服務(wù) 售后服務(wù)
 
售后服務(wù) 售后服務(wù)
 
備案專線 備案專線
 
×