Learn Pointer Events In 15 Minutes
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- Almost everyone defaults to using mouse events such as mousedown and mouseup, but this is not ideal. Mouse events do not include things like touch and pen interactions and duplicating all your mouse events into touch events is not ideal either. This is where pointer events come in. Pointer events work for all types of input (mouse, touch, pen, etc.) and best of all they include a few additional features and methods that make doing complex interactions incredibly easy.
📚 Materials/References:
Touch Events Video: • Learn JavaScript Touch...
Event Listener Crash Course Video: • Learn JavaScript Event...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:16 - Pointer Event Basics
09:10 - Pointer Capturing
#PointerEvents #WDS #JavaScript
I’ve been doing web dev for… well since the web was a thing, and before that. Yeah, I have a grey beard. Anyway, stuff like this just blows my mind: I had no idea pointer events included so much. I’m a professional FED (for decades now) screaming to keep up and this stuff is so f-ing cool. Really appreciate these videos, they’re a crutch for this ageing web engineer.
can you give me some advises ??. i'm full stack web dev. hope you can share your experience with me.
@@labialkosta261 I'd like to know what a full stack developer does too 🤣
@@hikari1690 Are you living beneath the thick Antarctic ice sheets? But I'm surprised you got your emojis right!! 😍😍
@@hikari1690 not sure if you are joking but for starters, fullstack dev position usually requires to deal with databases and servers (they call this Back-end) and developing UI, interfaces for users (Front-end). But most of the time fullstack devs are just being abused to do just whatever the hell the company wants em to do, which is pretty much everything. From deployment, testing, documentation, api etc. this is why fullstack dev is a one man team for small companies. In a larger project you work with fellow fullstack devs which is nice.
You're a fed? you work for the FBI?
Man plz never stop creating videos.
Thanks for all that you do Kyle. I would really love a dedicated video on Git, on the more advanced commands like Rebase, Revert, Cherry Pick, how to undo a commit that has already been pushed to the repo etc. I think this would help a lot of people out. Thanks again, your are fantastic at what you do
This is the most mind blowing thing I have seen in awhile and the presentation was a masterclass.
Thanks Kyle!
This is one of few channels that respects the audiences intelligence and drops relevant pro-tips
You just earned a subscription, sir! The presentation is so dang concise and logical!
Amazing, thank you very much. Pointer capturing is clutch when you need it and if you don't know it exists, you are going to spend a lot of time debugging your own implementation. Thanks again for the excellent video, as always.
Wow this is awesomely powerful stuff. Although my current project has a very simple UI that wouldn't need this I've often wondered how to integrate mouse and touch input in HTML and these pointer events are prefect! Thanks for the insight, Kyle, and as usual your very succinct delivery!
Should you ever run out of ideas for next video, I would love to see a summary of all the event coordinate properties ending with X and Y: pageX/Y, offsetX/Y, clientX/Y, layerX/Y, etc. I am sure your rundown will be the best possible.
Kyle, I have been watching your videos for weeks now, and I still have to see one that is not extremely well researched, entertaining and useful.
it is no wonder you are so succesful. Congratulations on an excellent job.
Great stuff, as always. Learned a lot, thanks Kyle!
Ok that`s it, on my next project i am going to have to just test pointer events out on Both my Mouse AND my Touchscreen. Nicely done Sire! 👍
Hi Kyle! I am impressed with the contents of your videos for quite some time. I have a PhD in Computer Science and I only use web programming for my Github website. I am really glad to see that there are young fellows here on TH-cam such as yourself that are so competent, clear, and spot on. This video is a jewel and I want to congratulate you for its content. I was an university professor and I loved to explain things in a way to make people understand it. I know you must have spent hours and hours to prepare this video, but the result is amazing. It is quite a bit "dense", but this is not a complaint, it's good this way. I am subscribing to your channel right now and keeping this video for future use. I have already exchanged the mouse events by pointer events in my site but unfortunately my Canvas demos with user interaction are not working on mobiles for some reason. If you have some ideas what could be the problem please let me know. Cheers!
Thank you man! I love when you talk about topics that is find to hard good examples
I had yet to learn of the existence of these new events.
Thanks for sharing and for keeping up these good tutorials.
man just perfect timing for this upload, my friend was asking me to implement a custom video player
Even experienced developers should watch all of ur videos ❤️❤️ great content nd concepts
Kyle, Thank-you for creating this video. I’m a microcontroller hobbyist. I have recently learned JS and (HTML ,CSS as required). Intent being to use phone, tablet or computer to connect to the microcontroller. The Pointer method looks like what I need. Furthermore, I watched your o event video. The Usb connection / debugging interface ( assuming I can connect) will enable me to cleanup optimize my tablet interface . Many thanks for your effort creating these Excellent ‘concise ‘ technical videos . Well done !!
You've always got the best update man 😊
Thanks man for the great contente you create. I am a fullstack engineer and still come to learn a lot from your videos :)
Thanks for video, I was always confused on mouse vs. pointer events, this helps. Only problem is your move & up handlers are nested in your down handler, leaving stray closures / event handlers.
Excellent video + explanations.
Thank you. This video came up perfectly for me, didn't know what to do with my draggable slider.
WOW! That's amazing video, I learned something today! THANK YOU
Wow another miraculous video. Thanks 👍👍
Amazing and useful video, thank you bro
Great content, as usual!
I find myself dashing back and forth between Kyle and a couple other content providers: some simpler stuff in depth with others, and more hardcore with Kyle. Basically so because Kyle relies on my being well up to speed with simpler things an we frequently don't know those things as thoroughly as it may seem to us. Some are easier-paced also, or narrowly targetted. Like Kevin Powell: I know Kyle can do as well in CSS, but to my taste, Kevin does more to transfer exactly the CSS part of the game to us in an easier to understand way. But then again when I know I need to go hardcore with pure ES or ME*N and WebAssembly and similar scary things, I come to Kyle. Great thanks for great content!
really well done!
I'm off to re-write all the interaction events on my range-slider component, now. haha.
Pointer solves issue for every touch or mouse event thanks brother ♥️♥️♥️👍👍👍
Awesome! Learned a lot!
Holly molly, setPointerCapture, this would have saved me many hours of work. Great Tip!👍
Very informiative video. Thanks for sharing
In one of the React JS apps I am working on, pointer events didn't get executed as expected for a textarea on Android. (Technically I was using MUI TextField.) I don't exactly remember the issue. But I ended up having to use touch events instead. And then decided just to use mouse events for PC devices. I expected pointer events to work in this case and curious why it didn't.
(For more detail: I was trying to capture the touch down state for document selection change. On that note, I also was unable to get onselectionchange to work for textarea.)
Maybe I will revisit this to see if there was conflicts with native touch events.
I didn't even know these exist. Thanks!
the thing i didn't knew existed, it is just awesome. Hope so i can be able to use it somewhere
Thanks for your videos, it is very helpful.
this is so fast and amazing!
A new trick learnt by this full stack engineer. Thank you for the video.
Very interesting! Thanks!
Can you please make more videos on pointer events!? Just an overall tutorial would be great. Where you use it in a project or something like that.
Great video, dude.
Your short videos are very effective
Very cool, great video :)
Would love to see canvas next!
Month ago I have found bug in my app, after search found pointer events. Now I'm using only pointer / key events in my apps. Googled 'double pointer down event' and found Your video, thank You!. Why very time when I'm searching any tutorial google shows You, Kevin Powell or DevEd :D.
dude... you rule on this... thanks!
You are the saver man🔥
Thank you man 🙏
thanks man, useful.
Nice vid about events that I knew nothing about! Having mouse events, touch events, and now pointer events is a bit of a pain really. Quick note on your positioning code: it only works if the timeline element is at 100% of the page width; you need to offset it by the timeline rectangle X to get the correct timeline handle-position in this case. I would also clamp it to 0-100% range:
function clamp(n, min, max) {
return (n < min) ? min : (n > max) ? max : n;
}
function setTimelinePosition(e) {
const rect = timeline.getBoundingClientRect();
const pos = clamp(((e.clientX - rect.x) / rect.width) * 100, 0, 100);
timeline.style.setProperty('--handle-position', `${pos}%`);
}
- this should work regardless of the x-position of the timeline div.
lordie thank you!
Thank you so much for wathcing and have a good DEV. 😁
I am creating a video editing application and I have a major problem which you have fixed with setPointerCapture().
Thank you so much for that.
This is so helpful! WOW! Would be nice if you shared how you set up your dev server, someone said it's vscode live server?
Hey, nice video and thanks for your help, I'm currently in a training to become front-end dev and I've learned so much thanks to your videos ! I really appreciate the time & effort !
I have a question though : why don't you use semi colons at the end of every line in your JavaScript ? Is it optional ?
yes it's optional
It is called "automatic semicolon insertion".
Hello! Cool video!
A little thing made me wonder...
The auto complete suggested both append() and appendChild() on the document. What really is the difference between the two? Appending something wouldn't make it its child?
Really appreciated
boom cool stuff, since the release of gsap observer plugin im in heaven dealing with all this weard implementations, would be cool to see some content on it, theres no much avaliable yet cause its new
Create a new web developer guide 2022 with all the new things that u posted this year ….like the one u created in 2021 plzzz😇 god bless u mate for all the hard work u do for the people
Hi kyle can you make a tutorial about the youtube play video window how it minimizes when you push it down or press the back key and when you have a 2nd thought of watching the content still you just drag it up again. 😅
I accidentally read the title as "Pointers In 15 Minutes". Pretty much thought this was a C++ video
Kyle never let us down with his content. JavaScript is such a huge mess (basically because of how huge it is) and it is easy to overlook useful api methods that are already built-in such as pointer capture.
oh this is great, i didnt know pointer events existed lol
Best Video i love it 🥰🥰🥰🥰🥰🥰🥰
magestic!
Well time to Update Website code.. Thanks.😀
Nice! How do you put your JS code to the phone and run it ? Maybe simply host the code in a HTML file and download it to your phone. ?
Hello, it's simply Chrome USB debugging, you just have the page opened on your Android phone, and the debugging enabled.
hi thanks for nice video. i have a question... in touch device, during mousemove event, mouseleave/out events doesn't get fired even if the position of touch has left the currentTarget of mouseleave/out. how can i detect it?
Thanks!
Thank you for the support!
Thanks
Pointer events are gr8, that's my first impression when i first used them in one of my reactjs projects, i replaced the entire browser scrolling with my own, it's pretty fast too, can handle nested scrolling horizontal/vertical, keyboard show/hide, custom scrollbar, infinity scrolling, scroll end animation, free scrolling, snap scroll, and so on, Pretty awesome stuff but css [touch-event: none], fail to apply to nested child elements, So i handled it a react way.
Pointer events are for controlled environment, my scroll emulation let the user do all kinds of sh!t, so i dropped it.
touch-event: none is probably just not inherited by grandchildren and so on. Maybe a global rule like * {touch-event: none;}?
I trust this guy with my life
does "click" event work on all mobile/tablets? I read somewhere it's binded to the touch event, but some other sources say it's not reliable. My own phone works with the click event but I can't generalize from that.
I think the Click Event should be Fine also for mobile devices Touch Input
Best one is `setPointerCapture` 👍
Please increase code text size, to make it readable on smartphones. Thanks
Hey WDS, why dont you ever use onpointerdown? Its perfectly valid, just like addEventListener(pointerDown, ...)
I think your answer is "because onpointerdown only allows for one pointer event to be set, and can easily be overwritten by other scripts; addEventListener allows the most compatibility with other scripts, such as liraries, and apis. Plus addEventListener keeps our event listener private, so we can easily control which scripts are given certain pieces of data from the user."
Does touch-action: none in css do the same thing as preventDefault in a touchstart listener?
Would also love an answer to this! It doesn't seem like it, but I'm debugging in safari ios, and i'm new to web languages, so i can't tell for sure.
Amazing....
why we cannot add touch-action: none via javscript, i was trying but it didnt work!, so add remove the touch action bsed on a specefic scenario, because disabling touch action for good will prevent the application to scroll to other sections
Can anyone explain why changing "e.target" to "timeline" @11:45 resolves the glitchiness? Or why it's a bug at all?
Is it possible to see markup and css for these, please? git or codepen?
cool *thumbup*
Would be the substitute for "onclick" "onpointerdown"? Or does this lead into issues?
it's still a click event, so addEventListener("click", cb) as usual.
And use event listeners, never do onclick or whatever
am I the only one who is having issues with pointerup? it works as long as it's the first event (pointerdown commented out) but if pointerdown exists it doesn't seem to fire. any advice appreciated!
I noticed this on MPN: "Note: Pointer events are not available in Web Workers."
soon we will get thumbnails like : "Stop using Javascript"
Can you make the paper ripple animation like the youtube has on retry button or other google products ???
Hello, how are you doing the interactive mobile to browser emulator ? How do I do that? Thanks.
Also interested in how
He tells you in the beginning of the video that his last video on touch events covers that.
Does touch event has pen support too?
Before using something check caniuse as the most first step
Along with mouse events and point events I want some knowledge on Chris Evans too 😂
Still I am waiting for WCAG 2.1 compliance. Please include/cover that topic
What do you mean by no stack to full stack ?
zero to hero
Stack and pointer. Not what they used to be.
❤️❤️❤️
Lesgoo
nice 📷
Sir make a video on microservices
I'm from India ...I wanna buy yr react course... But 60 dollars is just too much for me ... And i can't use coupons ... What should I do
sheeeeeeesh
How do you hold all of this stuff in your mind?!?!?!? INSANE!!!im so jealous and feel so rage about it…..Do you take Adderall or something???