From a9e5ed552de82fa57afdac20b2fc1fff63d0e978 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 9 May 2020 11:05:21 +0300 Subject: [PATCH] minor rephrasings --- .../1-mouse-events-basics/article.md | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 4a5ea641..fbb44044 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -1,4 +1,4 @@ -# Mouse events basics +# Mouse events In this chapter we'll get into more details about mouse events and their properties. @@ -6,11 +6,7 @@ Please note: such events may come not only from "mouse devices", but are also fr ## Mouse event types -We can split mouse events into two categories: "simple" and "complex" - -### Simple events - -The most used simple events are: +We've already seen some of these events: `mousedown/mouseup` : Mouse button is clicked/released over an element. @@ -21,28 +17,24 @@ The most used simple events are: `mousemove` : Every mouse move over an element triggers that event. -`contextmenu` -: Triggers when opening a context menu is attempted. In the most common case, that happens when the right mouse button is pressed. Although, there are other ways to open a context menu, e.g. using a special keyboard key, so it's not exactly the mouse event. - -...There are several other event types too, we'll cover them later. - -### Complex events - `click` : Triggers after `mousedown` and then `mouseup` over the same element if the left mouse button was used. `dblclick` -: Triggers after a double click over an element. +: Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. -Complex events are made of simple ones, so in theory we could live without them. But they exist, and that's good, because they are convenient. +`contextmenu` +: Triggers when 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. -### Events order +...There are several other events too, we'll cover them later. -An action may trigger multiple events. +## Events order -For instance, a click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released. +As you can see from the list above, a user action may trigger multiple events. -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`. +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`. ```online Click the button below and you'll see the events. Try double-click too. @@ -54,7 +46,7 @@ Also we can see the `which` property that allows to detect the mouse button.
``` -## Getting the button: which +## Mouse button: "which" Click-related events always have the `which` property, which allows to get the exact mouse button. @@ -116,17 +108,25 @@ For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`. ``` ```warn header="There are also mobile devices" -Keyboard combinations are good as an addition to the workflow. So that if the visitor has a keyboard -- it works. And if their device doesn't have it -- then there should be another way to do the same. +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 have coordinates in two flavours: +All mouse events provide coordinates in two flavours: 1. Window-relative: `clientX` and `clientY`. 2. Document-relative: `pageX` and `pageY`. -For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`. And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is, how far the document was scrolled. They are similar to `position:fixed`. +We already covered the difference between them in the chapter . + +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 500x500, 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. ````online Move the mouse over the input field to see `clientX/clientY` (the example is in the `iframe`, so coordinates are relative to that `iframe`): @@ -136,11 +136,9 @@ Move the mouse over the input field to see `clientX/clientY` (the example is in ``` ```` -Document-relative coordinates `pageX`, `pageY` are counted from the left-upper corner of the document, not the window. You can read more about coordinates in the chapter . +## Preventing selection on mousedown -## Disabling selection - -Double mouse click has a side-effect that may be disturbing in some interfaces: it selects the text. +Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text. For instance, a double-click on the text below selects it in addition to our handler: