Pointer events tutorial #732
Conversation
|
A live preview of this PR will be available at the URL(s) below. Tutorial link: |
| @@ -0,0 +1,3 @@ | |||
| [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) are DOM events fired from any pointing device, including touch, mouse, and pen. | |||
|
|
|||
| This unified model for handling user input events allows you to handle mobile, desktop, and tablet interactions with one set of event listeners, and no need to handle "compatibility" mouse events for touch. | |||
There was a problem hiding this comment.
I'd add a small section that's like
"In this tutorial you will..."
- build X
- Learn about Y
- Learn how to Z
| @@ -0,0 +1,3 @@ | |||
| [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) are DOM events fired from any pointing device, including touch, mouse, and pen. | |||
|
|
|||
| This unified model for handling user input events allows you to handle mobile, desktop, and tablet interactions with one set of event listeners, and no need to handle "compatibility" mouse events for touch. | |||
There was a problem hiding this comment.
You touch on "compatibility" but don't really explain what it is or why it's a problem.
Since this is a beginner course you could have a college freshman or high schooler come in and never heard of mouse events because WE'RE LIVING IN THE PAST, MAN!
| @@ -0,0 +1,3 @@ | |||
| [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) are DOM events fired from any pointing device, including touch, mouse, and pen. | |||
|
|
|||
| This unified model for handling user input events allows you to handle mobile, desktop, and tablet interactions with one set of event listeners, and no need to handle "compatibility" mouse events for touch. | |||
There was a problem hiding this comment.
Also a prior knowledge section thats like "we expect you to be familiar with" and like link out to relevant docs sections or MDN on events
| @@ -0,0 +1,23 @@ | |||
| Pointer Events are modelled after Mouse Events, and therefore have very similar naming. | |||
| class MyElement extends LitElement { | ||
| @state() log = ''; | ||
|
|
||
| static styles = [css` |
There was a problem hiding this comment.
I'd suggest some playground folds here to hide things like styling and focus the reader's attention on the parts that matter
|
|
||
| **Pointer Capturing Events** | ||
|
|
||
| When a pointer is captured or released, the element will fire a `gotpointercapture` or `lostpointercapture` event respectively. |
There was a problem hiding this comment.
What can this be used for? Why is it good to know this?
|
|
||
| When a pointer is captured or released, the element will fire a `gotpointercapture` or `lostpointercapture` event respectively. | ||
|
|
||
| Use your mouse, touchscreen, or pen in this example to see how the capturing or releasing the pointer changes behavior when dragging outside the box. |
There was a problem hiding this comment.
Explain the code again:
This example sets the capture when clicking the X checkbox... etc
Tie this back into the step's topic:
see how the capturing or releasing the pointer changes behavior when dragging outside the box with and without pointer capturing.
| @@ -0,0 +1,20 @@ | |||
| Another powerful feature of Pointer Events is the ability to control the brower's native touch behavior with the use of the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) css property. | |||
| * `manipulation` | ||
| * This setting is equivalent to `pan-x pan-y pinch-zoom`, only disabling "double tap to zoom" and other browser-specific behaviors. | ||
|
|
||
| Try using a touchscreen with this example to see how the different settings for `touch-action` control event firing and browser behavior. |
There was a problem hiding this comment.
or use chrome dev tools' mobile emulation mode
Also again an appeal to point to sections of the code that would be relevant with a code snippet etc.
| * `manipulation` | ||
| * This setting is equivalent to `pan-x pan-y pinch-zoom`, only disabling "double tap to zoom" and other browser-specific behaviors. | ||
|
|
||
| Try using a touchscreen with this example to see how the different settings for `touch-action` control event firing and browser behavior. |
There was a problem hiding this comment.
Add a congratulations or you're done page after this that recaps the knowledge learned and points to docs or readings that the user should probably logically follow up with next. e.g. event handling in lit, gestures articles / docs in MDN, setting event options in lit, shadow dom and events docs and maybe this article that I'm in love with
https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/
e111077
added
Tutorial
No description provided.