The w3c w3c. Making. IO/touch – the event…

MouseEvent indicates the MouseEvent

The MouseEvent interface refers to events that occur when a user interacts with a pointer device, such as a mouse. Common events using this interface include: click, dblclick, mouseup, mousedown.

MouseEvent is derived from UIEvent, which is derived from Event.

The event returned by binding a MouseDown event is a MouseEvent object

The constructor

MouseEvent() generates a new MouseEvent object

attribute

// The attributes on the MouseEvent object are read-only, listing some common parameters
{
  altKey: 'Returns true if Alt key is pressed when mouse event is triggered'.ctrlKey: 'Returns true if CTRL key is pressed when mouse event is triggered'.shiftKey: 'Returns true if shift key is held down when mouse event is triggered'.metaKey: 'Returns true if meta key is pressed when mouse event is triggered'.button: 'If the mouse button is pressed, it will return a value'.buttons: 'If one or more mouse buttons are pressed, it returns the sum of one or more mouse buttons'.detail: 'Provide current hits'.cancelBubble: 'Boolean value indicating whether the bubbling of the event was cancelled'.cancelable: 'Boolean value indicating whether the event can be cancelled'.clientX: 'Horizontal coordinates (in pixels) of a point relative to the viewport, excluding any scroll offset'.clientY: 'The vertical coordinates (in pixels) of a point relative to the viewport, excluding any scroll offset'.offsetX: 'The x-coordinate of the mouse pointer relative to the inside edge position of the target node'.offsetY: 'The Y coordinate of the mouse pointer relative to the inside edge position of the target node'.layerX: 'Returns the horizontal coordinates of the event relative to the current layer'.layerY: 'Returns the vertical coordinates of the event relative to the current layer'.pageX: 'The x-coordinate of the mouse pointer relative to the entire document'.pageY: 'The y-coordinate of the mouse pointer relative to the entire document'.movementX: 'Horizontal mouse movement between the current event and the last Mousemove event. Currentevent.movementx = currentevent.screenx -previousevent.screenx '.movementY: 'Vertical mouse movement between the current event and the last Mousemove event'.screenX: 'X-coordinate of mouse pointer relative to global (screen)'.screenY: 'Y coordinates of the mouse pointer relative to the global (screen)'.bubbles: 'Boolean value that indicates whether the event will bubble in the DOM.'.defaultPrevented: 'Boolean value indicating whether the default behavior of the event is cancelled'.isTrusted: 'Indicates whether the event is emitted by the browser (for example, a user click) or by a script (using the event creation method)'.currentTarget: 'Returns the Element object (a reference to the target for which the event is currently registered)'.target: 'Returns the Element object (a reference to the original target of the event, which is the target specified when the event was originally dispatched)'.timeStamp: 'Timestamp of event creation (precision millisecond)'.type: 'Type of event',}Copy the code

Buttons and buttons

Button returns a number identifying the mouse key * that was pressed0: Main button, usually the left mouse button or the default value *1: Secondary key, usually the middle mouse wheel key *2: second key, usually the right mouse button *3The fourth button, usually referred to as the browser back button4Fifth buttons return a value identifying one or more mouse buttons that have been pressed. If multiple keys are pressed, the value is the sum of the values of all keys *0: No keys or no initialization *1: Left mouse button *2: Right mouse button *4: Mouse wheel or middle key *8: The fourth button, usually referred to as the browser back button *16The fifth button, usually the forward button of a browser example:1.First press the left mouse button, button =0= buttons,1
2.Press the right mouse button again, button =2= buttons,3The buttons =1+2
3.Then press the middle mouse button, Button =1= buttons,7The buttons =1+2+4
Copy the code

See the various ways in which front-end event handling is boundJuejin. Cn/post / 698727…