Mouse Events Basics
In this chapter, we are going to get into more details about the mouse events, along with their properties.
Mouse events belong to the most common and significant event types. Mouse event object can be defined as a unity of events that happen when the mouse interacts with the HTML document.
Please note that the naming “mouse events” doesn’t consider that the events may come only from “mouse devices”. They can also come from phones, tablets, and other devices.
The Types of Mouse Events¶
As a rule, mouse events are split into two categories: simple and complex.
Simple Events
The simple events are considered the most used ones.
So, the simple events are:
- mousedown/mouseup: the mouse button is clicked or released over an element.
- mouseover/mouseout: the pointer of the mouse comes over or out of an element.
- mousemove: each move of the mouse triggers the event.
- contextmenu: it triggers when an attempt of opening a context menu is detected. Commonly, it happens when the user presses the right button of the mouse.However, there are other means of opening the context menu ( for instance, using a specific keyboard key but it doesn’t belong to mouse events).
Complex Events¶
The complex events are the following:
- click: it is activated after mousedown and then mouseup over the same element when the left button of the mouse is used.
- dblclick: it triggers when a double click over an element is performed.
The basis of the complex events is simple ones. Hence, complex events are made of the simple complex. Theoretically, programmers can live without them. But their existence makes the lives of programmers easier, as they are very convenient.
Events Order¶
Multiple events can be triggered by an action. For example, an initial click triggers mousedown at the moment the button is pressed. Afterward, comes the mouseup and click when it is released.
In the cases when multiple events are initiated by a single action, their order is fixed. It means that the handlers are called in the following sequence: mousedown → mouseup → click .
Getting the button: which¶
The click-related events always contain the which property, allowing to get a particular mouse button. You needn’t use it for the events related to click and contextmenu .
But, in the event of tracking mousedown and mouseup ,it will be necessary. The reason is that such events trigger on any button. So, which will allow distinguishing between “right-mousedown” and “left-mousedown” .
The possible three values are as follows:
- The left button - event.which == 1 .
- The middle button- event.which == 2 .
- The right button - event.which == 3 .
However, the middle button is rarely used.
Modifiers: shift, alt, ctrl and meta¶
All the mouse events have information about pressed modifier keys.
The properties of the events are:
- shiftKey: Shift
- altKey: Alt (or Opt for Mac)
- ctrlKey: Ctrl
- metaKey:for Mac - Cmd
When the matching key is pressed during the event, the properties above are true.
Let’s take an example, where the button works on Ctrl+Shift+click:
<!DOCTYPE html>
<html>
<body>
<button id="button">Ctrl+Shift+Click on me!</button>
<script>
button.onclick = function(event) {
if (event.ctrlKey && event.shiftKey) {
alert('Welcome!');
}
};
</script>
</body>
</html>Please, consider that for Mac, Cmd is used instead of Ctrl.On Mac, there is another Cmd that corresponds to the property metaKey. So, in places where Windows user presses Ctrl+Enter or Ctrl+A, a user of MAC should press Cmd+Enter or Cmd+A. So, anytime it is necessary to support combinations, such as Ctrl+click, for MAC it makes sense using Cmd+click.
Coordinates: clientX/Y, pageX/Y¶
The overall mouse events have coordinates in the following two flavours:
- clientX and clientY that are window-relative.
- pageX and pageY that are document-relative.
Let’s say you have a window with the size 500x500. The mouse is in the left-upper corner. In this case, clientX and clientY are equal to 0. When the mouse is in the center, clientX and clientY are equal to 250, no matter how far the document has been scrolled. It is like position:fixed .
The document related coordinates, such as pageX , pageY should be counted from the left-upper corner of the document.
Disabling Selection¶
Double-mouse click is not free from side effects. It is disturbing in several interfaces: it selects text.
For example, double-click on the text mentioned below will select it in addition to the handler:
<!DOCTYPE html>
<html>
<body>
<span ondblclick="alert('dblclick')">Double click me</span>
</body>
</html>In case you press the left button of the mouse without releasing it, the mouse will be moved, which can make an unwanted selection.
There are different ways to overcome unwanted selections. In the case above, the best solution is preventing the browser action on mousedown . It will prevent the following selections:
<!DOCTYPE html>
<html>
<body>
<b ondblclick="alert('Click!')" onmousedown="return false">
Double-click me
</b>
</body>
</html>Prevent Copying
In case you intend to disable selection with the purpose of protecting your page from copy-pasting, the oncopy event can be used, like this:
<!DOCTYPE html>
<html>
<body>
<div oncopy="alert('Copying forbidden!');return false">
Dear user,
The copying is forbidden for you.
</div>
</body>
</html>So, after that, copying a piece of text from <div> will not be possible. Of course, if the user, who has access to the HTML-source, will be able to get the content from there.
Summary¶
So, mouse events are one of the most common and significant event types. They can be of two types: simple and complicated. As complicated events are based on the simple ones, theoretically you can work without them. But they are very convenient in usage and can make your work much easier.
As for the mouse events properties, they are the following:
- The button: which.
- The modifier keys, such as ctrlKey, altKey,shiftKey , as well as metaKey (for Mac).
- The window-relative coordinates, such as clientX/clientY .
- The document-relative coordinates, such as pageX/pageY .
0 Comments
CAN FEEDBACK
Emoji