Shulou(Shulou.com)05/31 Report--

This article mainly introduces the javascript how to modify the key Shift, Ctrl, Alt, Meta event related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this javascript how to modify the key Shift, Ctrl, Alt, Meta event article will have a harvest, let's take a look.

Mouse events are mainly triggered by the mouse, but the state of some keys on the keyboard when the mouse is pressed can also affect the action to be taken. These modification keys are Shift, Ctrl, Alt, and Meta (Windows keys on Windows keyboards and Cmd keys on Macs), and they are often used to modify the behavior of mouse events. DOM specifies four attributes for this purpose, indicating the state of these modified bonds: shiftKey, ctrlKey, altKey, and metaKey. These properties contain Boolean values that are true if the corresponding key is pressed, or false if the corresponding key is pressed. When a mouse event occurs, you can determine whether the user pressed the key at the same time by detecting these properties. Let's look at the following example.

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 (",")

});

In this example, we detect the status of different modification keys through an onclick event handler. The array keys contains the name of the modification key that was pressed. In other words, if there is an attribute whose value is true, the name of the corresponding modification key is added to the keys array. After the event handler, a warning box displays the detected key information to the user.

IE9, Firefox, Safari, Chrome, and Opera all support these four keys. The metaKey attribute is not supported in IE8 and previous versions.

Modifier Keys Example

Click me while holding a modifier key

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 (",")

});

The code in the copy page is saved as an EventUtil.js file as follows:

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

}

}

}

This is the end of the article on "how to modify key Shift, Ctrl, Alt, Meta events in javascript". Thank you for reading! I believe you all have a certain understanding of "how to modify Shift, Ctrl, Alt and Meta events in javascript". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.