The button property returns a number which relates to a single button. The movementX and movementY properties return the relative position of the mouse cursor between the current and previous mousemove events firing. The offsetX and offsetY properties return the mouse cursors position relative to the target element the event was added to. This includes the distance the page has been scrolled horizontally or vertically. The pageX and pageY properties return the mouse cursors position relative to the current html document. X and y properties are alias for the clientX and clientY property. The clientX and clientY properties return the mouse cursors position relative to the application's viewport, this does not include any scrolling overflow. The screenX and screenY properties return the mouse cursors position relative to the devices screen. The mouse position properties below can seem similar as we'll observe in the example but they serve distinct use cases which are described below. We will go over most of the common events that will be used for html canvas game design.
When a mouseevent occurs properties are attached via a MouseEvent type that help describe the nature of the event. mouseup: This event is triggered when any mouse button is released.mousedown: This event is triggered when any mouse button is pressed.mousemove: This event is triggered when the mouse cursor position is changed when inside the target element.mouseleave: This event is triggered when the mouse cursor position is moved outside the target element.mouseenter: This event is triggered when the mouse cursor position is moved inside the target element.Screen vs Offset vs Page vs Client positionsīelow are the most common mouse event listeners.In this tutorial we are going to cover handling mouse input events which will include the following concepts and a practical example to tie them all together.
0 kommentar(er)
