Learn JavaScript Touch Events In 17 Minutes
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- Mobile responsive design is something everyone focuses on with CSS, but touch events are something almost no one takes the time to implement. In this video I will show you how to get started with touch events, how to connect your phone to your computer for debugging, and overall how to make working with touch events easy.
📚 Materials/References:
Chrome Devices URL: chrome://inspect/#devices
🌎 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
00:55 - Touch event basics
03:54 - How to debug your phone from your computer
07:40 - Advanced touch event features
#TouchEvents #WDS #JavaScript
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
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! 👌👌👌
Nice introduction to topic, I never came across until now. Thank you 🙂!
Great video, simple and clear, thanks a lot!
Really clear and to the point explanation - great work
Great explaination in such a short time. Thank you!
Wow, touch events are quite interesting, and fairly simple to work with really :) Great video
This is super! Thanks so much Kyle!
He's the best teacher I have every seen
And from now on he is my favourite youtuber also
awesome and super useful, thanks!
this is really my favorite channel . Thanks
Another cool video from Kyle. Thank you, Mister!
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.
Thanks a lot Kyle. extremely useful and interesting topic and video.👍
Absolute game changer, this saved me tons of time researching these things as a noobie
Great tutorial. Thanks.
How I love watching your videos immediately released 😫
thank you for this video, it helped me a lot!
Thankyou man, you made me happy. 🙂
Great job kyle👏👏👏
well done my man , thanks alot
super cool man. super cool. gracias
Very cool! Thanks!
Amazing!! You are awesome!!! ❤️
Thanks!
interesting topic, thank you!
Great Video!!
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.
Awesome Video 🔥
Awesome bro, thanks for that lesson, u help me, this good lesson👍
Thanks for sharing your mad skills... impressive.
Top shelf 👍🏻
Oh, thank you kyle. Just saved me from going on searching about touch events. Once again thank you.
Amazing tutorial
You're the man
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
Perfect video bro
Damn, this is like a bite-sized course. Pretty concise without sacrificing details.
great video
It's Ammazing !
This touches me deeply!!
This is what I'm looking for
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
Ha! You read my mind. I was just struggling with this!
Amazing
Super useful
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
Perfect
Great👍
awesome!
Very touching
6:30 I've been developing for a little over a year now and this just blew my mind
thanks
Nice!
FERA!!! 🦁
awesome
Nice share 👍
The video which I wanted
You're perfect
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.
Hey Kyle, good stuff thanks. When are you playing the guitar 🎸
Awesome video ++++++++++++++++++ 😃
Thansk for the video. Noob question: what is that semicolon ";" you put in front of the arrys?
Nice
Could you make a video about pinch zoom to magnify images?
It works with Firefox as well, and it is a simple as with Chrome. You get even select elements, get flexbox and grid helper (like on desktop), ...
I didn't even know that such Javascript events existed in the first place
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
connecting my phone to the website that is run locally is cool
@14:41, Could you have used stopPropagation() in your event handlers instead of preventDefault() in addEventListener()?
wanba ask if touch event can set to lock control on resize resolutions of the screen also? 🔒
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
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.
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.
Hi! How make drag and drop on mobile diveces, I've done ordinary dnd on desktop, but on mobile devices it wasnt working
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.
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 😅
Is it there an event for double tapping?
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?
09:35 even if i put 3 fingers at once ... omg he's a cat 🐾🐈
Can you please do a video on google maps api? I think it would be useful to a lot of people
Can we do this too with iPhone?
I don't use an iPhone myself, but I need to debug on it for clients...
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
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.
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.
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 ...
Hey Kyle unfortunately my doesn't work.
Ive tried to navigate to my ip address on the phone but the pages aren't available.
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.
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.
I lost it when I heard "we need two in the back"
Five server which is a different extension automatically gives you the router address
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.
anyone get null error? I'm having a hard time fixing this.
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.
Brother please send me a code in js
Tap on screen to execute function only once
Is changedTouches an object?.... Am confused there
5:38 Weird glitch that knocks video and audio out of sync.
Plz give me heart