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.
@@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.
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.
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, 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 !!
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
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.
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!
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. 😅
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.
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.
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.
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 RUclips 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!
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
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.
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!
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.
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?
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?
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
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
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 ?
I would like to add one line for this code at the *setTimelinePosition* function, the following : _if (e.clientX / rect.width> 100 || e.clientX / rect.width< 0) return (percent = 0)_ to prevent the *setPointerCapture* behavior of sliding out of the timeline limits 🤓
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.
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!
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.
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."
Not sure about you, but the first example will not work in desktop mode without adding "pointer-events: none;" to "dot" class, otherwise "pointerup" event will never be triggered. I think the second example is missing an explanation of why you are nesting all event listeners inside "pointerdown" event listener. BTW, nice video.
The reason is, that the dots are appended to document. Instead, try adding them to the video div, because all event listeners are depending on it. That should be fixed in his examples as he states pointer events are for both desktop and mobile devices. But, in general this is a great video, learned a lot.
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.
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! 👍
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.
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, 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 just earned a subscription, sir! The presentation is so dang concise and logical!
Thank you for providing high-quality knowledge-sharing videos all the time.
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
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.
man just perfect timing for this upload, my friend was asking me to implement a custom video player
Thank you man! I love when you talk about topics that is find to hard good examples
Even experienced developers should watch all of ur videos ❤️❤️ great content nd concepts
This is the most mind blowing thing I have seen in awhile and the presentation was a masterclass.
Thanks Kyle!
I had yet to learn of the existence of these new events.
Thanks for sharing and for keeping up these good tutorials.
Thank you. This video came up perfectly for me, didn't know what to do with my draggable slider.
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!
Pointer solves issue for every touch or mouse event thanks brother ♥️♥️♥️👍👍👍
This is one of few channels that respects the audiences intelligence and drops relevant pro-tips
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. 😅
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.
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!
I didn't even know these exist. Thanks!
Thank you so much for wathcing and have a good DEV. 😁
Excellent video + explanations.
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.
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 RUclips 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!
dude... you rule on this... thanks!
A new trick learnt by this full stack engineer. Thank you for the video.
the thing i didn't knew existed, it is just awesome. Hope so i can be able to use it somewhere
Thanks man for the great contente you create. I am a fullstack engineer and still come to learn a lot from your videos :)
Amazing and useful video, thank you bro
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
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 stuff, as always. Learned a lot, thanks Kyle!
this is so fast and amazing!
really well done!
I'm off to re-write all the interaction events on my range-slider component, now. haha.
Holly molly, setPointerCapture, this would have saved me many hours of work. Great Tip!👍
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.
WOW! That's amazing video, I learned something today! THANK YOU
Wow another miraculous video. Thanks 👍👍
Thanks for your videos, it is very helpful.
Your short videos are very effective
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.
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!
You've always got the best update man 😊
Best one is `setPointerCapture` 👍
Very informiative video. Thanks for sharing
Would love to see canvas next!
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.
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?
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.
Great video, dude.
Awesome! Learned a lot!
Very interesting! Thanks!
Thank you man 🙏
Great content, as usual!
Before using something check caniuse as the most first step
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?
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?
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.
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
Really appreciated
thanks man, useful.
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
Please increase code text size, to make it readable on smartphones. Thanks
I trust this guy with my life
You are the saver man🔥
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
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".
I would like to add one line for this code at the *setTimelinePosition* function, the following : _if (e.clientX / rect.width> 100 || e.clientX / rect.width< 0) return (percent = 0)_ to prevent the *setPointerCapture* behavior of sliding out of the timeline limits
🤓
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?
Can you make the paper ripple animation like the youtube has on retry button or other google products ???
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;}?
Very cool, great video :)
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!
Well time to Update Website code.. Thanks.😀
oh this is great, i didnt know pointer events existed lol
Thanks
Thanks!
Thank you so much for the support.
Of course my 2€ is not much but I thought maybe other people will notice that "Thanks" -button too if I use it.
I noticed this on MPN: "Note: Pointer events are not available in Web Workers."
Does touch event has pen support too?
magestic!
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
Still I am waiting for WCAG 2.1 compliance. Please include/cover that topic
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."
Can you provide the source code.
cool *thumbup*
I accidentally read the title as "Pointers In 15 Minutes". Pretty much thought this was a C++ video
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
Amazing....
Not sure about you, but the first example will not work in desktop mode without adding "pointer-events: none;" to "dot" class, otherwise "pointerup" event will never be triggered. I think the second example is missing an explanation of why you are nesting all event listeners inside "pointerdown" event listener. BTW, nice video.
The reason is, that the dots are appended to document. Instead, try adding them to the video div, because all event listeners are depending on it. That should be fixed in his examples as he states pointer events are for both desktop and mobile devices.
But, in general this is a great video, learned a lot.
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???
Along with mouse events and point events I want some knowledge on Chris Evans too 😂
Best Video i love it 🥰🥰🥰🥰🥰🥰🥰
Pointerdown is nice, unfortunatelly then "preventDefault();" behaves unpredictably = doesn't work.
What do you mean by no stack to full stack ?
zero to hero
Stack and pointer. Not what they used to be.
Need tutorials on mongodb aggregate