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.
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
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.
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🤗
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
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())
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
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.
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.
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.
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?
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
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.
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.
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.
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
This was a beautiful gem! Thank you!
Absolute game changer, this saved me tons of time researching these things as a noobie
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.
Exactly what I wanted right now 🤗🤗😍😍 This is why I love web dev simplified so much.
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
Really clear and to the point explanation - great work
Thank you so much for this. It was a great intro.
Damn, this is like a bite-sized course. Pretty concise without sacrificing details.
this is really my favorite channel . Thanks
How I love watching your videos immediately released 😫
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
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.
Nice introduction to topic, I never came across until now. Thank you 🙂!
Another cool video from Kyle. Thank you, Mister!
Wow, touch events are quite interesting, and fairly simple to work with really :) Great video
Great explaination in such a short time. Thank you!
This is super! Thanks so much Kyle!
Great job kyle👏👏👏
Thankyou man, you made me happy. 🙂
Great video, simple and clear, thanks a lot!
Oh, thank you kyle. Just saved me from going on searching about touch events. Once again thank you.
awesome and super useful, thanks!
This touches me deeply!!
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.
Awesome 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
Great Video!!
thank you for this video, it helped me a lot!
Amazing!! You are awesome!!! ❤️
well done my man , thanks alot
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 ...
Great tutorial. Thanks.
This is what I'm looking for
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 😅
6:30 I've been developing for a little over a year now and this just blew my mind
Thanks a lot Kyle. extremely useful and interesting topic and video.👍
@14:41, Could you have used stopPropagation() in your event handlers instead of preventDefault() in addEventListener()?
Awesome bro, thanks for that lesson, u help me, this good lesson👍
09:35 even if i put 3 fingers at once ... omg he's a cat 🐾🐈
Very cool! Thanks!
Amazing tutorial
Perfect video bro
interesting topic, thank you!
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
Ha! You read my mind. I was just struggling with this!
Top shelf 👍🏻
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
super cool man. super cool. gracias
Thanks for sharing your mad skills... impressive.
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 Ammazing !
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.
Very touching
wanba ask if touch event can set to lock control on resize resolutions of the screen also? 🔒
FERA!!! 🦁
You're the man
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!
Hey Kyle, good stuff thanks. When are you playing the guitar 🎸
Thansk for the video. Noob question: what is that semicolon ";" you put in front of the arrys?
great video
Hi! How make drag and drop on mobile diveces, I've done ordinary dnd on desktop, but on mobile devices it wasnt working
Nice share 👍
Nice!
Super useful
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
Can we do this too with iPhone?
I don't use an iPhone myself, but I need to debug on it for clients...
Hey Kyle unfortunately my doesn't work.
Ive tried to navigate to my ip address on the phone but the pages aren't available.
awesome!
Could you make a video about pinch zoom to magnify images?
Great👍
5:38 Weird glitch that knocks video and audio out of sync.
Amazing
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.
Is it there an event for double tapping?
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.
Perfect
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.
Awesome video ++++++++++++++++++ 😃
The video which I wanted
connecting my phone to the website that is run locally is cool
I didn't even know that such Javascript events existed in the first place
You're perfect
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.
Five server which is a different extension automatically gives you the router address
awesome
Is changedTouches an object?.... Am confused there
Can you please do a video on google maps api? I think it would be useful to a lot of people
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 ;)
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.
Brother please send me a code in js
Tap on screen to execute function only once
Nice
why was Kyle putting a ; semi colon in front of some lines ??
@Maria ok thanks !
@Maria thanks!
anyone get null error? I'm having a hard time fixing this.
So what about Pointer Events? Its well-supported and much better and easy to use than Touch Events.