1.2 Types of mouse events in JavaScript

In this chapter, we will go deeper with the list of mouse events, consider their common properties, as well as those events that are associated with the click.

Types of mouse events

Conventionally, events can be divided into two types: "simple" and "complex."

Simple Events

Mousedown- the mouse button is pressed over the element.

Mouseup-the mouse button is released above the element.

Mouseover-the mouse appeared above the element.

Mouseout-the mouse left the element.

Mousemove-each mouse movement above an element generates this event.

If the user clicks on an element no less than three mouse events fire, in this order: In general mousedown and mouseup are more useful than click. Some browsers don’t allow you to read out mouse button information onclick. Furthermore, sometimes the user does something with his mouse but no click event follows. Suppose the user depresses the mouse button on a link, then moves his mouse off the link and then releases the mouse button. Now the link only registers a mousedown event. Similarly, if the user depresses the mouse button, then moves the mouse over a link and then releases the mouse button, the link only registers a mouseup. In neither case does a click event fire. Whether or not this is a problem depends on the user interaction you want. But you should generally register your script onmousedown/up, unless you’re completely sure you want the click event and nothing else. If you use alerts in handling these events, the browser may lose track of which event took place on which element and how many times it took place, messing up your scripts. So it’s best not to use alerts.

Mouse events have the following properties:

• Mouse button: which (for IE8-: need to be set from the button)

• The element that raised the event: target

• Coordinates, relative to the window: clientX / clientY

• Coordinates, relative to the document: pageX / pageY (for IE8-: set by clientX / Y and scrolling)

• If the spindle is clamped. key, then there is a corresponding property: altKey, ctrlKey, shiftKey or metaKey (Mac).

• To support Ctrl + click, do not forget to check if (e.metaKey || e.ctrlKey) so that Mac users are also happy.

Complex Events

Click-called when the mouse is clicked, that is, when mousedown, and then mouseup on one element

Contextmenu-called by right-clicking on an element.

Dblclick-called when double-clicking on an element.

Complex can be made up of simple ones, so in theory one could do without them at all. But they are, and it is good, because with them it is more convenient.

The order of events

One action can trigger several events. For example, a click causes mousedown first when it is clicked, and then mouseup and click when the button is released.

In those cases where one action generates several events, their order is fixed. That is, the handlers are called in the order mousedown → mouseup → click.

Click on the button below and you will see what kind of events happen in this case. Try also double click.

On the test-bench below, all mouse events are recorded, and if more than 1 second passes between events, they are separated by a line for readability. Also there are properties which / button, by which you can define the mouse button. We will discuss them further.

  

Начало формы

 

Each event is handled independently.

For example, mouse click + click events occur at the same time, but are processed sequentially. At first the mouseup processing is completely finished, then click is launched.

Getting information about the button: which

When handling events related to mouse clicks, it is sometimes important to know which button is clicked.

To get the mouse button in the event object, there is a which.

In practice, it is rarely used; usually the handler is hung either onclick - only on the left mouse button, or oncontextmenu - only on the right.

The following values ​​are possible:

• event.which == 1 - left button

• event.which == 2 - middle button

• event.which == 3 - right button

This property is not supported by IE8, but it can be obtained in the manner described at the end of this chapter.

Right click: oncontextmenu

This event is triggered by right-clicking:

<div> Right click on this button displays "Click." </ div>

<button oncontextmenu = "alert ('Click!');"> Right click here </ button>

Clicking on the button above after the oncontextmenu handler will show the usual context menu, which the browser always shows when right-clicking. This is its default action.

If we do not want the built-in menu to appear, for example, because we show our own, specific to our application, then you can undo the default action.

In the example below, the built-in menu will not be shown:

<button oncontextmenu = "alert ('Click!'); return false"> Right click here </ button>

Modifiers shift, alt, ctrl and meta

In all mouse events, there is information about the modifier keys that are pressed.

Corresponding properties:

• shiftKey

• altKey

• ctrlKey

• metaKey (for Mac)

Caution: on Mac instead of Ctrl is Cmd

On computers running Windows and Linux there are special keys Alt, Shift and Ctrl. On Mac there is one more special key: Cmd, which corresponds to the metaKey property.

In most cases, where Ctrl is used for Windows / Linux, Cmd is used on the Mac. Where the Windows user presses Ctrl + Enter or Ctrl + A, the Mac user presses Cmd + Enter or Cmd + A, and so on, almost always Cmd instead of Ctrl.

Therefore, if we want to support a combination of Ctrl + click or other similar, then under Mac it makes sense to use Cmd + click. Mac users will be much more comfortable.

Moreover, even if we would like to force Mac users to use Ctrl + click, it would be difficult. The fact is that a normal click with a clipped Ctrl under Mac works like a right click and generates an oncontextmenu event, and not at all onclick, as under Windows / Linux.

The solution - that users of both operating systems work with comfort, paired with ctrlKey it is necessary to use metaKey.

In JS-code this means that for the convenience of Mac users it is necessary to check if (event.ctrlKey || event.metaKey).

Coordinates in the window: clientX / Y

All mouse events provide the current coordinates of the cursor in two ways: relative to the window and relative to the document.

A pair of clientX / clientY properties contains the cursor coordinates relative to the current window.

In this case, for example, if your window is 500x500 and the mouse is in the center, then both clientX and clientY will be equal to 250.

You can scroll the page as you like, but if you do not move the mouse, the clientX / clientY cursor coordinates will not change, because they are considered relative to the window, not the document.

Mouse over the input field to see clientX / clientY:

<input onmousemove = "this.value = event.clientX + ':' + event.clientY">

In the same coordinate system, the elem.getBoundingClientRect () method also works, returning the coordinates of the element, as well as position: fixed.