Событие мыши мышь javascript

MouseEvent

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click , dblclick , mouseup , mousedown .

MouseEvent derives from UIEvent , which in turn derives from Event . Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.

Several more specific events are based on MouseEvent , including WheelEvent , DragEvent , and PointerEvent .

Constructor

Static properties

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Non-standard Read only Minimum force necessary for a normal click. MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Non-standard Read only Minimum force necessary for a force click.

Instance properties

This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .

Instance methods

This interface also inherits methods of its parents, UIEvent and Event . MouseEvent.getModifierState() Returns the current state of the specified modifier key. See KeyboardEvent.getModifierState() for details. MouseEvent.initMouseEvent() Deprecated Initializes the value of a MouseEvent created. If the event has already been dispatched, this method does nothing.

Example

This example demonstrates simulating a click (programmatically generating a click event) on a checkbox using DOM methods. Event state (canceled or not) is then determined with the return value of method EventTarget.dispatchEvent() .

HTML

p> label>input type="checkbox" id="checkbox" /> Checkedlabel> p> p> button id="button">Click me to send a MouseEvent to the checkboxbutton> p> 

JavaScript

function simulateClick()  // Get the element to send a click event const cb = document.getElementById("checkbox"); // Create a synthetic click MouseEvent let evt = new MouseEvent("click",  bubbles: true, cancelable: true, view: window, >); // Send the event to the checkbox element cb.dispatchEvent(evt); > document.getElementById("button").addEventListener("click", simulateClick); 

Result

Specifications

Источник

Mouse events

In this chapter we’ll get into more details about mouse events and their properties.

Please note: such events may come not only from “mouse devices”, but are also from other devices, such as phones and tablets, where they are emulated for compatibility.

Mouse event types

We’ve already seen some of these events:

mousedown/mouseup Mouse button is clicked/released over an element. mouseover/mouseout Mouse pointer comes over/out from an element. mousemove Every mouse move over an element triggers that event. click Triggers after mousedown and then mouseup over the same element if the left mouse button was used. dblclick Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. contextmenu Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it’s not exactly the mouse event.

…There are several other events too, we’ll cover them later.

Events order

As you can see from the list above, a user action may trigger multiple events.

For instance, a left-button click first triggers mousedown , when the button is pressed, then mouseup and click when it’s released.

In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order mousedown → mouseup → click .

Click the button below and you’ll see the events. Try double-click too.

On the teststand below, all mouse events are logged, and if there is more than a 1 second delay between them, they are separated by a horizontal rule.

Also, we can see the button property that allows us to detect the mouse button; it’s explained below.

Mouse button

Click-related events always have the button property, which allows to get the exact mouse button.

We usually don’t use it for click and contextmenu events, because the former happens only on left-click, and the latter – only on right-click.

On the other hand, mousedown and mouseup handlers may need event.button , because these events trigger on any button, so button allows to distinguish between “right-mousedown” and “left-mousedown”.

The possible values of event.button are:

Most mouse devices only have the left and right buttons, so possible values are 0 or 2 . Touch devices also generate similar events when one taps on them.

Also there’s event.buttons property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at MDN if you ever need it.

Old code may use event.which property that’s an old non-standard way of getting a button, with possible values:

• event.which == 1 – left button,
• event.which == 2 – middle button,
• event.which == 3 – right button.

As of now, event.which is deprecated, we shouldn’t use it.

Modifiers: shift, alt, ctrl and meta

All mouse events include the information about pressed modifier keys.

• shiftKey : Shift
• altKey : Alt (or Opt for Mac)
• ctrlKey : Ctrl
• metaKey : Cmd for Mac

They are true if the corresponding key was pressed during the event.

For instance, the button below only works on Alt + Shift +click:

On Windows and Linux there are modifier keys Alt , Shift and Ctrl . On Mac there’s one more: Cmd , corresponding to the property metaKey .

In most applications, when Windows/Linux uses Ctrl , on Mac Cmd is used.

That is: where a Windows user presses Ctrl + Enter or Ctrl + A , a Mac user would press Cmd + Enter or Cmd + A , and so on.

So if we want to support combinations like Ctrl +click, then for Mac it makes sense to use Cmd +click. That’s more comfortable for Mac users.

Even if we’d like to force Mac users to Ctrl +click – that’s kind of difficult. The problem is: a left-click with Ctrl is interpreted as a right-click on MacOS, and it generates the contextmenu event, not click like Windows/Linux.

So if we want users of all operating systems to feel comfortable, then together with ctrlKey we should check metaKey .

For JS-code it means that we should check if (event.ctrlKey || event.metaKey) .

Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard – they work.

But if their device doesn’t have it – then there should be a way to live without modifier keys.

Coordinates: clientX/Y, pageX/Y

All mouse events provide coordinates in two flavours:

We already covered the difference between them in the chapter Coordinates.

In short, document-relative coordinates pageX/Y are counted from the left-upper corner of the document, and do not change when the page is scrolled, while clientX/Y are counted from the current window left-upper corner. When the page is scrolled, they change.

For instance, if we have a window of the size 500×500, and the mouse is in the left-upper corner, then clientX and clientY are 0 , no matter how the page is scrolled.

And if the mouse is in the center, then clientX and clientY are 250 , no matter what place in the document it is. They are similar to position:fixed in that aspect.

Move the mouse over the input field to see clientX/clientY (the example is in the iframe , so coordinates are relative to that iframe ):

Preventing selection on mousedown

Double mouse click has a side effect that may be disturbing in some interfaces: it selects text.

For instance, double-clicking on the text below selects it in addition to our handler:

If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted.

There are multiple ways to prevent the selection, that you can read in the chapter Selection and Range.

In this particular case the most reasonable way is to prevent the browser action on mousedown . It prevents both these selections:

Before. Double-click me . After

Now the bold element is not selected on double clicks, and pressing the left button on it won’t start the selection.

Please note: the text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that’s fine for users.

If we want to disable selection to protect our page content from copy-pasting, then we can use another event: oncopy .

 
Dear user, The copying is forbidden for you. If you know JS or HTML, then you can get everything from the page source though.
 

If you try to copy a piece of text in the , that won’t work, because the default action oncopy is prevented.

Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it.

Summary

Mouse events have the following properties:

• Button: button .
• Modifier keys ( true if pressed): altKey , ctrlKey , shiftKey and metaKey (Mac).
  • If you want to handle Ctrl , then don’t forget Mac users, they usually use Cmd , so it’s better to check if (e.metaKey || e.ctrlKey) .

  The default browser action of mousedown is text selection, if it’s not good for the interface, then it should be prevented.

  In the next chapter we’ll see more details about events that follow pointer movement and how to track element changes under it.

  Tasks

  Selectable list

  Create a list where elements are selectable, like in file-managers.

  • A click on a list element selects only that element (adds the class .selected ), deselects all others.
  • If a click is made with Ctrl ( Cmd for Mac), then the selection is toggled on the element, but other elements are not modified.

  P.S. For this task we can assume that list items are text-only. No nested tags.

  P.P.S. Prevent the native browser selection of the text on clicks.

  Comments

  • If you have suggestions what to improve — please submit a GitHub issue or a pull request instead of commenting.
  • If you can’t understand something in the article – please elaborate.
  • To insert few words of code, use the tag, for several lines – wrap them in tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)

  Источник