JavaScript MouseEvent Case Study

MouseEvent

When the mouse performs a certain operation, an event object is generated, which records all the properties of the mouse when the event is triggered.

You can print out the MouseEvent object in the Google console as follows.

function mouseDown(e){
var e = e||event;
console.log(e)
}
window.onload = function (){ 
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

The printed MouseEvent is as follows:

This object has many properties, but the most commonly used ones are offsetX, offsetY, clientX/clientY, pageX, and pageY. What do the various attributes correspond to?

The following are some common events:

altkey: Whether the alt key is pressed when the mouse event is triggered, if so, returns true, otherwise returns false.

button: The event attribute returns an Arabic numeral, 0 represents pressing the left button, 1 represents pressing the scroll wheel, and 2 represents pressing the right button.

offsetX, offsetY: The event attributes return the X and Y coordinates of the mouse relative to the event source element when the event is triggered. Standard events do not have corresponding attributes.

clientX, clientY: The event properties return the horizontal and vertical coordinates of the mouse pointer relative to the browser page (or client area) when the event is triggered.

pageX, pageY: The event attributes return the horizontal and vertical coordinates of the mouse pointer relative to the upper left corner of the entire page when the event is triggered.

screenX, screenY: The event attributes return the horizontal and vertical coordinates of the mouse position relative to the user's screen when the event is triggered. The reference point, or origin, is the upper left corner of the screen.

Well, text descriptions are always annoying, so here’s a classic picture to explain everything:

This is the end of this article about the JavaScript mouse event (MouseEvent) case study. For more relevant JavaScript mouse event (MouseEvent) content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!