Merge pull request #2050 from javascript-tutorial/paroche-patch-19

Various minor syntax and punctuation changes

Author: paroche

2-ui/3-event-details/6-pointer-events/article.md

@@ -1,6 +1,6 @@
 # Pointer events
 
-Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen and so on.
+Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen, and so on.
 
 ## The brief history
 
@@ -16,13 +16,13 @@ Let's make a small overview, so that you understand the general picture and the
 
 - To solve these issues, the new standard Pointer Events was introduced. It provides a single set of events for all kinds of pointing devices.
 
-As of now, [Pointer Events Level 2](https://www.w3.org/TR/pointerevents2/) specification is supported in all major browsers, while the [Pointer Events Level 3](https://w3c.github.io/pointerevents/) is in the works. Unless you code for Internet Explorer 10 or Safari 12 and below, there's no point in using mouse or touch events any more. We can switch to pointer events.
+As of now, [Pointer Events Level 2](https://www.w3.org/TR/pointerevents2/) specification is supported in all major browsers, while [Pointer Events Level 3](https://w3c.github.io/pointerevents/) is in the works. Unless you code for Internet Explorer 10, or for Safari 12 or below, there's no point in using mouse or touch events any more -- we can switch to pointer events.
 
-That said, there are important peculiarities, one should know them to use them correctly and avoid surprises.  We'll pay attention to them in this article.
+That said, there are important peculiarities one should know them to use them correctly and avoid surprises.  We'll make note of them in this article.
 
 ## Pointer event types
 
-Pointer events are named similar to mouse events:
+Pointer events are named similarly to mouse events:
 
 | Pointer Event | Mouse event |
 |---------------|-------------|
@@ -42,25 +42,25 @@ As we can see, for every `mouse<event>`, there's a `pointer<event>` that plays a
 ```smart header="Replacing `mouse<event>` with `pointer<event>` in our code"
 We can replace `mouse<event>` events with `pointer<event>` in our code and expect things to continue working fine with mouse.
 
-The support for touch devices will also "magically" improve, but we'll probably need to add `touch-action: none` rule in CSS. See the details below in the section about `pointercancel`. 
+The support for touch devices will also "magically" improve, but we'll probably need to add `touch-action: none` in CSS. See the details below in the section about `pointercancel`. 
 ```
 
 ## Pointer event properties
 
-Pointer events have the same properties as mouse events, such as `clientX/Y`, `target` etc, plus some extra:
+Pointer events have the same properties as mouse events, such as `clientX/Y`, `target`, etc., plus some others:
 
 - `pointerId` - the unique identifier of the pointer causing the event.
     
-    Allows to handle multiple pointers, such as a touchscreen with stylus and multi-touch (explained below).
-- `pointerType` - the pointing device type, must be a string, one of: "mouse", "pen" or "touch". 
+    Allows us to handle multiple pointers, such as a touchscreen with stylus and multi-touch (explained below).
+- `pointerType` - the pointing device type. Must be a string, one of: "mouse", "pen" or "touch". 
 
     We can use this property to react differently on various pointer types.
 - `isPrimary` - `true` for the primary pointer (the first finger in multi-touch).
 
-For pointers that measure a contact area and pressure, e.g. a finger on the touchscreen, the additional properties can be useful:
+For pointers that measure contact area and pressure, e.g. a finger on the touchscreen, the additional properties can be useful:
 
-- `width` - the width of the area where the pointer touches the device. Where unsupported, e.g. for mouse it's always `1`. 
-- `height` - the height of the area where the pointer touches the device. Where unsupported, always `1`.
+- `width` - the width of the area where the pointer touches the device. Where unsupported, e.g. for a mouse, it's always `1`. 
+- `height` - the height of the area where the pointer touches the device. Where unsupported, it's always `1`.
 - `pressure` - the pressure of the pointer tip, in range from 0 to 1. For devices that don't support pressure must be either `0.5` (pressed) or `0`.
 - `tangentialPressure` - the normalized tangential pressure.
 - `tiltX`, `tiltY`, `twist` - pen-specific properties that describe how the pen is positioned relative the surface.
@@ -69,11 +69,11 @@ These properties aren't very well supported across devices, so they are rarely u
 
 ## Multi-touch
 
-One of the things that mouse events totally don't support is multi-touch: a user can touch them in several places at once on their phone or tablet, or perform special gestures.
+One of the things that mouse events totally don't support is multi-touch: a user can touch in several places at once on their phone or tablet, or perform special gestures.
 
-Pointer Events allow handling multi-touch with the help of `pointerId` and `isPrimary` properties.
+Pointer Events allow handling multi-touch with the help of the `pointerId` and `isPrimary` properties.
 
-Here's what happens when a user touches a screen in one place, and then puts another finger somewhere else on it:
+Here's what happens when a user touches a screen in one place, then puts another finger somewhere else on it:
 
 1. At the first touch:
     - `pointerdown` with `isPrimary=true` and some `pointerId`.
@@ -91,7 +91,7 @@ Here's the demo that logs `pointerdown` and `pointerup` events:
 
 [iframe src="multitouch" edit height=200]
 
-Please note: you must be using a touchscreen device, such as a phone or a tablet to actually see the difference. For single-touch devices, such as a mouse, there'll be always same `pointerId` with `isPrimary=true`, for all pointer events.
+Please note: you must be using a touchscreen device, such as a phone or a tablet, to actually see the difference. For single-touch devices, such as a mouse, there'll be always same `pointerId` with `isPrimary=true`, for all pointer events.
 ```
 
 ## Event: pointercancel
@@ -109,7 +109,7 @@ We'll demonstrate `pointercancel` on a practical example to see how it affects u
 
 Let's say we're impelementing drag'n'drop for a ball, just as in the beginning of the article <info:mouse-drag-and-drop>.
 
-Here are the flow of user actions and corresponding events:
+Here is the flow of user actions and the corresponding events:
 
 1) The user presses the mouse button on an image, to start dragging
     - `pointerdown` event fires
@@ -134,7 +134,7 @@ We'd like to implement our own drag'n'drop, so let's tell the browser not to tak
 We need to do two things:
 
 1. Prevent native drag'n'drop from happening:
-    - Can do it by setting `ball.ondragstart = () => false`, just as described in the article <info:mouse-drag-and-drop>.
+    - We can do this by setting `ball.ondragstart = () => false`, just as described in the article <info:mouse-drag-and-drop>.
     - That works well for mouse events.
 2. For touch devices, there are also touch-related browser actions. We'll have problems with them too.
     - We can prevent them by setting `#ball { touch-action: none }` in CSS. 
@@ -218,12 +218,12 @@ Pointer events allow handling mouse, touch and pen events simultaneously.
 
 Pointer events extend mouse events. We can replace `mouse` with `pointer` in event names and expect our code to continue working for mouse, with better support for other device types.
 
-Remember to set `touch-events: none` in CSS for elements that we engage, otherwise the browser hijacks many types of touch interactions and pointer events won't be generated.
+Remember to set `touch-events: none` in CSS for elements that we engage, otherwise the browser will hijack many types of touch interactions, and pointer events won't be generated.
 
 Additional abilities of Pointer events are:
 
 - Multi-touch support using `pointerId` and `isPrimary`.
-- Device-specific properties, such as `pressure`, `width/height` and others.
+- Device-specific properties, such as `pressure`, `width/height`, and others.
 - Pointer capturing: we can retarget all pointer events to a specific element until `pointerup`/`pointercancel`.
 
-As of now, pointer events are supported in all major browsers, so we can safely switch to them, if IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.
+As of now, pointer events are supported in all major browsers, so we can safely switch to them, as long as IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.