Thank god for you. A clear, concise crash course on touch events. I have been scouring the internet only to find documentations and outdated stackoverflows. This was exactly what I needed.
Hey Kyle great video as always! Btw I noticed one thing that the about Phone menu is actually leaking your phone number & imei at 4:19 Please add some blur or box to hide it. Thanks.
W wat a great guide W you not only gave great real world use case scenarios but you also show a fast and simple way to debug any and all examples. There has been times where I followed a guide and ran into a bug that wasn't explain in the demonstration and couldn't figure out how to properly debug it. Ppl would pay crazy amounts of money to get half of this effort and quality at a college. One more W for good measure. P.S. I don't even web dev but love it when I see a good and clear guide.
i was just working on something for mobile browser the other day and I've used on click everywhere! got to learn a lot from this.... can you please do tutorial for holding down plus minus button to gradually speed up number? Thanks
Kyle, have you considered pointer events? Would be simple to change your code to make pointer events work, but they would have the advantage of working for touch and mouse at the same time. There is no touch array with pointer event but you don't need that. As you could see the simultaneous touch is nearly impossible anyway. Pointer events are, I think, simpler to implement.
According to MDN, the pointer event seems to have better browser compatibility (for non experimental properties). Also, the pointer event has more capability to handle things such as pressure and tiltX for pen devices.
I was considering just click for my (soon to be available) explainer video on programming drag and drop. Then I considered adding touch based on this great video by Kyle - just been testing using pointer events - both in one event! Tested in mobile chrome and edge.
Perfect this time more clear 👍 i like kyle videos cause its clear without extra information . But some times he is too fast on talking like eminem😂 . ✌️Thak you for share your information kyle🤗
Ur the best 💜 Can u pls teach us this 16:34 part with some examples? How to detect touchmove on swipe up/down/left/right ? For example, if I swipe up, then... (something happen) Need help to detect these moves 😅
You could detect the direction by storing the `pageY` and `pageX` properties of the `Touch`es into variables and then comparing them to the updated values on later events. If previous X is less than current X, the touch is moving to the right etc. I can't be arsed to try this out, so I'm not sure if this works as is, but here's what I'd start with: const logDirection () => { // scope these variables so we can use this on different targets let prevX, prevY return (event) => { const { pageX, pageY } = event.changedTouches[0] if (prevX < pageX) console.log('right') else if (prevX > pageX) console.log('left') if (prevY < pageY) console.log('down') else if (prevY > pageY) console.log('up') prevX = pageX prevY = pageY } } document.addEventListener('touchmove', logDirection())
can you make a video about paper ripple animation when there is not internet youtube have a retry button and when you long press on it the animation goes slow and stays there as long as you click there i am struggling to find this kind of animation that youtube has
You can also do remote USB debugging in desktop Firefox and connect its DevTool to your Android Firefox instance. Both need to be the same version iirc. On desktop goto about:debugging to enable the feature.
It's not needed there, but when you have a line that starts with brackets or parentheses, you must use semicolons at the start or in the previous line because otherwise the interpreter will think that line is a continuation of the previous line
What about Laptops and Pen / Graphics Tablets? and how do *PointerEvents* fit into the picture? Tablets are connected to PC-ish devices (Laptops) and many come with support for pinch and zoom => multi touch points. Aren't PointerEvents supposed to be the clicky-touchy "meta" event that cover both touch and click? As a (Wacom) pen tablet user that also uses the pen/stylus as a mouse replacement, I always run into issues on web pages that use *drag* events like maps (Google, Apple). Several panels in Firefox DevTools also do not respond properly when I try to resize them using the pen. It's only web stuff that has this issue. Desktop apps respond perfectly fine to the pen-as-mouse use case.
4:34 Knox 3.8: So you're using a Samsung, released on >= November 11, 2021. Fascinating how little it takes, to draw some kind of conclusions about something.
@@WebDevSimplified Good to know that at least Business APIs/Frameworks get updates. Thanks for the feedback, I wasn't aware that Samsung provides updates for this component. Also for older devices, that may no longer receive system updates.
It's the worst when you're trying to have different handlers for click and touch... Then you remember touching also registers as a click... And yes, you can have both touch and click working on your computer, as long as you have a touch screen and your browser is aware of it.
Hey love your vids, i don't know if you can help me with something, i did catch the vertical movement and i increase and decrese a variable value and i did set each 10 + or - to do anotherVariable++ and anotherVariable-- and run a function func(anotherVariable) my problem is no matter what i try the function its only called 1 time if i console log instead of a function like cons..log(10+) cons..log(10-) it will print as it should but as soon as i change to a real render code it breaks on first call
I'm creating a modal which on swipe down it closes. The issue is that with e.preventDefault() I can't focus on the element inside the modal because it prevents the click. Is there a work around this please?
Thanks Kyle. I would use these tricks in my mobile apps developed with React Native(which is basically JScript😊) Maybe they documented already in Touchables.
Hi Kyle, I've found that a semicolon had been automatically added on the first place of a line. It seems like an auto formatting was working. I googled up for the reason for using a starting semicolon but I'm not clear what benefit would it be. Would you please let me know why you are using a starting semicolon, what benefit, or why it could be a good habit while coding?
Hello Kyle, Thanks for great content. I don;t know why I can't run site on my mobile device. I'm on the same internet connection, the same IP adress. Did you come across that kind of situation?
The semicolon is only there because of the interpreter. He doesn't use them on the end of each line. So the interpreter would consider those brackets to be part of the previous statement and execute it like an array (that wouldn't exist). To prevent this, he has to use the semicolon (delimiter) before the brackets. The [] is the "spread element" (look it up and read more). It can be used to create arrays from iterable objects. This is an important distinction with Array.from(). Array.from() can create arrays from iterable objects but also array-like objects (things with a length property, but may not be iterable). Neither of which is really faster than the other, but the way he uses the spread element wasn't necessarily what it's designed for. It also doesn't help the readability of your code. Array.from() makes sense to anyone who reads your code and should probably be used for this circumstance more than the spread element for that reason alone. The slice method is the old version of Array.from(). Array.from() is more efficient and can create arrays from more complicated data structures, but if browser compatibility is your concern then the slice method is your go to. Hope that helps!
you'd need to "cache" the initial taps' x/y coordinates and then compare them with those that trigger during the move event. Find any classic drag-and-drop tutorial for the trajectory bits. That should give you clues on how to implement that using touch events. Also anything that deals with geometries in JS such as "canvas" painting stuff could be useful.
thanks. I'll definitely dive more into canvas stuff. For multi-touch-gestures, I'll use react-use-gesture. But I was surprised by this video, how straightforward the vanilla solution is.
@Maria it's also common for script concatenators and bundlers to put a semicolon between the scripts just to make sure statements don't "bleed" into each other. it's also a good idea to put one in front of any IIFE.
Thank god for you. A clear, concise crash course on touch events. I have been scouring the internet only to find documentations and outdated stackoverflows. This was exactly what I needed.
I agree, thanks God he's such an amazing teacher! 👌👌👌
You are uploading all the videos I'm needing this week 🤯🤯
This literally answered a ton of doubt that I usually had while building some touch based stuffs. Thanks a ton @Kyle :)
you're welcome
He's the best teacher I have every seen
And from now on he is my favourite youtuber also
Hey Kyle great video as always! Btw I noticed one thing that the about Phone menu is actually leaking your phone number & imei at 4:19 Please add some blur or box to hide it. Thanks.
This was a beautiful gem! Thank you!
Damn, this is like a bite-sized course. Pretty concise without sacrificing details.
Absolute game changer, this saved me tons of time researching these things as a noobie
Exactly what I wanted right now 🤗🤗😍😍 This is why I love web dev simplified so much.
Really clear and to the point explanation - great work
yet another high value video. Thanks Kyle. A similar video about debugging on iOS would be awesome. Because remember, Safari is the new IE...
Just install another browser...
@@Weagle1337 sure, I'll tell my 12k users
Thank you so much for this. It was a great intro.
W wat a great guide W you not only gave great real world use case scenarios but you also show a fast and simple way to debug any and all examples. There has been times where I followed a guide and ran into a bug that wasn't explain in the demonstration and couldn't figure out how to properly debug it. Ppl would pay crazy amounts of money to get half of this effort and quality at a college. One more W for good measure. P.S. I don't even web dev but love it when I see a good and clear guide.
this is really my favorite channel . Thanks
Nice introduction to topic, I never came across until now. Thank you 🙂!
How I love watching your videos immediately released 😫
This touches me deeply!!
6:30 I've been developing for a little over a year now and this just blew my mind
Great explaination in such a short time. Thank you!
Another cool video from Kyle. Thank you, Mister!
This is super! Thanks so much Kyle!
Wow, touch events are quite interesting, and fairly simple to work with really :) Great video
Great job kyle👏👏👏
Great video, simple and clear, thanks a lot!
awesome and super useful, thanks!
Thankyou man, you made me happy. 🙂
Oh, thank you kyle. Just saved me from going on searching about touch events. Once again thank you.
This is what I'm looking for
Awesome Video 🔥
thank you for this video, it helped me a lot!
Great Video!!
i was just working on something for mobile browser the other day and I've used on click everywhere! got to learn a lot from this.... can you please do tutorial for holding down plus minus button to gradually speed up number? Thanks
Kyle, have you considered pointer events? Would be simple to change your code to make pointer events work, but they would have the advantage of working for touch and mouse at the same time. There is no touch array with pointer event but you don't need that. As you could see the simultaneous touch is nearly impossible anyway. Pointer events are, I think, simpler to implement.
Indeed, this is the right and correct comment for this video...
According to MDN, the pointer event seems to have better browser compatibility (for non experimental properties). Also, the pointer event has more capability to handle things such as pressure and tiltX for pen devices.
interesting.... gonna read more into this
I was considering just click for my (soon to be available) explainer video on programming drag and drop. Then I considered adding touch based on this great video by Kyle - just been testing using pointer events - both in one event! Tested in mobile chrome and edge.
and pointer event has setPointerCapture/releasePointerCapture. Really helpful when dragging stuff around
Amazing!! You are awesome!!! ❤️
well done my man , thanks alot
Thanks a lot Kyle. extremely useful and interesting topic and video.👍
Great tutorial. Thanks.
Perfect this time more clear 👍 i like kyle videos cause its clear without extra information . But some times he is too fast on talking like eminem😂 . ✌️Thak you for share your information kyle🤗
Keminem😂
One could say it's... simplified.
Ur the best 💜
Can u pls teach us this 16:34 part with some examples?
How to detect touchmove on swipe up/down/left/right ?
For example, if I swipe up, then... (something happen)
Need help to detect these moves 😅
You could detect the direction by storing the `pageY` and `pageX` properties of the `Touch`es into variables and then comparing them to the updated values on later events. If previous X is less than current X, the touch is moving to the right etc. I can't be arsed to try this out, so I'm not sure if this works as is, but here's what I'd start with:
const logDirection () => {
// scope these variables so we can use this on different targets
let prevX, prevY
return (event) => {
const { pageX, pageY } = event.changedTouches[0]
if (prevX < pageX) console.log('right')
else if (prevX > pageX) console.log('left')
if (prevY < pageY) console.log('down')
else if (prevY > pageY) console.log('up')
prevX = pageX
prevY = pageY
}
}
document.addEventListener('touchmove', logDirection())
@@Italiafani omg that sounds complicated, but thank you, I will try it 😅
can you make a video about paper ripple animation when there is not internet youtube have a retry button and when you long press on it the animation goes slow and stays there as long as you click there i am struggling to find this kind of animation that youtube has
Very cool! Thanks!
It's Ammazing !
Perfect video bro
You can also do remote USB debugging in desktop Firefox and connect its DevTool to your Android Firefox instance. Both need to be the same version iirc.
On desktop goto about:debugging to enable the feature.
interesting topic, thank you!
Nice!
super cool man. super cool. gracias
Top shelf 👍🏻
Thanks for sharing your mad skills... impressive.
Ha! You read my mind. I was just struggling with this!
Awesome bro, thanks for that lesson, u help me, this good lesson👍
You're the man
Amazing tutorial
09:35 even if i put 3 fingers at once ... omg he's a cat 🐾🐈
Why do you have semicolons before each .forEach calls? 17:28
Edit: it was added magically at 9:25 by vscode I think 😆
It's not needed there, but when you have a line that starts with brackets or parentheses, you must use semicolons at the start or in the previous line because otherwise the interpreter will think that line is a continuation of the previous line
Thanks!
Very touching
great video
Super useful
FERA!!! 🦁
I didn't even know that such Javascript events existed in the first place
@14:41, Could you have used stopPropagation() in your event handlers instead of preventDefault() in addEventListener()?
connecting my phone to the website that is run locally is cool
Nice share 👍
Perfect
Amazing
Great👍
awesome!
Thansk for the video. Noob question: what is that semicolon ";" you put in front of the arrys?
You're perfect
What about Laptops and Pen / Graphics Tablets? and how do *PointerEvents* fit into the picture?
Tablets are connected to PC-ish devices (Laptops) and many come with support for pinch and zoom => multi touch points.
Aren't PointerEvents supposed to be the clicky-touchy "meta" event that cover both touch and click?
As a (Wacom) pen tablet user that also uses the pen/stylus as a mouse replacement, I always run into issues on web pages that use *drag* events like maps (Google, Apple).
Several panels in Firefox DevTools also do not respond properly when I try to resize them using the pen.
It's only web stuff that has this issue. Desktop apps respond perfectly fine to the pen-as-mouse use case.
Hey Kyle, good stuff thanks. When are you playing the guitar 🎸
4:34 Knox 3.8: So you're using a Samsung, released on >= November 11, 2021.
Fascinating how little it takes, to draw some kind of conclusions about something.
I am using a Samsung phone but it is much older than 2021
@@WebDevSimplified Good to know that at least Business APIs/Frameworks get updates.
Thanks for the feedback, I wasn't aware that Samsung provides updates for this component. Also for older devices, that may no longer receive system updates.
The video which I wanted
awesome
Hello! Until 7:00 everything is fine. I press the button and further "it is not possible to get access to a site". Need help please.
I'm looking at it and it's working! Children's illnesses go away on their own ...
It's the worst when you're trying to have different handlers for click and touch...
Then you remember touching also registers as a click...
And yes, you can have both touch and click working on your computer, as long as you have a touch screen and your browser is aware of it.
And you can plug mouse into the phone too ;)
wanba ask if touch event can set to lock control on resize resolutions of the screen also? 🔒
Awesome video ++++++++++++++++++ 😃
Hey love your vids, i don't know if you can help me with something, i did catch the vertical movement and i increase and decrese a variable value and i did set each 10 + or - to do anotherVariable++ and anotherVariable-- and run a function func(anotherVariable) my problem is no matter what i try the function its only called 1 time if i console log instead of a function like cons..log(10+) cons..log(10-) it will print as it should but as soon as i change to a real render code it breaks on first call
I'm creating a modal which on swipe down it closes. The issue is that with e.preventDefault() I can't focus on the element inside the modal because it prevents the click. Is there a work around this please?
5:38 Weird glitch that knocks video and audio out of sync.
Could you make a video about pinch zoom to magnify images?
Thanks Kyle. I would use these tricks in my mobile apps developed with React Native(which is basically JScript😊) Maybe they documented already in Touchables.
Hi! How make drag and drop on mobile diveces, I've done ordinary dnd on desktop, but on mobile devices it wasnt working
Nice
Hi Kyle, I've found that a semicolon had been automatically added on the first place of a line. It seems like an auto formatting was working.
I googled up for the reason for using a starting semicolon but I'm not clear what benefit would it be. Would you please let me know why you are using a starting semicolon, what benefit, or why it could be a good habit while coding?
Not sure about the semicolon either. It would be nice to know if it is a typo or standard practice.
Hello Kyle,
Thanks for great content.
I don;t know why I can't run site on my mobile device. I'm on the same internet connection, the same IP adress. Did you come across that kind of situation?
Did you ever figure out how to fix this? I'm having the exact same issue.
I lost it when I heard "we need two in the back"
Can we do this too with iPhone?
I don't use an iPhone myself, but I need to debug on it for clients...
Five server which is a different extension automatically gives you the router address
Is ;[] faster than Array.from() and Array.prototype.call.slice()?
The semicolon is only there because of the interpreter. He doesn't use them on the end of each line. So the interpreter would consider those brackets to be part of the previous statement and execute it like an array (that wouldn't exist). To prevent this, he has to use the semicolon (delimiter) before the brackets.
The [] is the "spread element" (look it up and read more). It can be used to create arrays from iterable objects. This is an important distinction with Array.from(). Array.from() can create arrays from iterable objects but also array-like objects (things with a length property, but may not be iterable). Neither of which is really faster than the other, but the way he uses the spread element wasn't necessarily what it's designed for. It also doesn't help the readability of your code. Array.from() makes sense to anyone who reads your code and should probably be used for this circumstance more than the spread element for that reason alone.
The slice method is the old version of Array.from(). Array.from() is more efficient and can create arrays from more complicated data structures, but if browser compatibility is your concern then the slice method is your go to.
Hope that helps!
@@KenW418 thank you for this explanation, I appreciate it.
Can you please do a video on google maps api? I think it would be useful to a lot of people
Hey Kyle unfortunately my doesn't work.
Ive tried to navigate to my ip address on the phone but the pages aren't available.
how would one detect the direction of a move?
(eg. to trigger sth on a 3-finger swipe left gesture)
you'd need to "cache" the initial taps' x/y coordinates and then compare them with those that trigger during the move event.
Find any classic drag-and-drop tutorial for the trajectory bits. That should give you clues on how to implement that using touch events.
Also anything that deals with geometries in JS such as "canvas" painting stuff could be useful.
thanks. I'll definitely dive more into canvas stuff.
For multi-touch-gestures, I'll use react-use-gesture. But I was surprised by this video, how straightforward the vanilla solution is.
Is it there an event for double tapping?
so many opportunities for jokes and none were taken advantage of
I couldn't have been the only one that saw those semi colons that are not needed
@Maria it's also common for script concatenators and bundlers to put a semicolon between the scripts just to make sure statements don't "bleed" into each other.
it's also a good idea to put one in front of any IIFE.
I can learn it within 8.5 minutes 😎
me who read the docs and got it for minute
@@grishakek Actually, I'm agree with. Especially when mdn documentation is so good
@@_dreamer__ yess exactly, I learnt a lot about async and event loops from mdn :)
Is changedTouches an object?.... Am confused there