Тёмный

JS Touch Events on Mobile Devices 

Steve Griffith - Prof3ssorSt3v3
Подписаться 101 тыс.
Просмотров 72 тыс.
50% 1

Beyond Mouse Events we have Touch events on mobile devices.
Unfortunately, there is NO tap, doubletap, swipe, swipeleft, swiperight, pan, panleft, panright, rotate, pinch, or zoom events.
We DO have touchstart, touchend, touchcancel, and touchmove. These events give us lots of information about where the touches are taking place. We can use this information to write functions that will mimic those other events.
Code GIST: gist.github.com/prof3ssorSt3v...

Опубликовано:

 

31 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 77   
@markcollins3856
@markcollins3856 3 года назад
This is great Steve, I'd much rather understand things on a base level so it's great to learn this way!
@faruksardar8829
@faruksardar8829 2 года назад
The only video on YT that explain Touch Events very well, Thanks Steve
@greenworld7085
@greenworld7085 4 года назад
Thanks a lot. I've created a vanilla JS slider with "change slide by mousedrag by mousedown,move,up events" functionality for pc. but couldn't make it work on my Android phone. Now I think I'll be able to make it work on my phone too. thanks a lot again.
@jurikonradi8941
@jurikonradi8941 3 года назад
Thanks a lot! You explained it very simply and clearly. I could not find how to console log on mobile.
@RedEyedJedi
@RedEyedJedi 3 года назад
No one makes better Javascript tutorials than Steve. This is a fact, I have searched long and hard to find better.
@marcusmaiialima
@marcusmaiialima 4 года назад
Thank's man, helped me a lot in a project :)
@AlejandroABG
@AlejandroABG 6 лет назад
Thank you, you helped me a lot.
@dylanhsiao4986
@dylanhsiao4986 6 лет назад
Hello Steve I am developing a responsive website and it needs touch events. Just stopping by to say thank you oh btw I also learn we can use chrome "remote devices". Thank you thank you thank you
@Azertuiopnbvcxwmlkjh
@Azertuiopnbvcxwmlkjh 3 года назад
Very clear content. Thanks!
@timonwa_loves_art
@timonwa_loves_art Год назад
This is awesome as always
@codingwithnamit8551
@codingwithnamit8551 3 года назад
thank you! that was really helpful!
@alii4334
@alii4334 4 года назад
very valuable playlist....thank you
@ispanskijshuanom
@ispanskijshuanom 3 года назад
Great explanation!!
@edessamediagroup8062
@edessamediagroup8062 5 лет назад
Thank you steve for an excellent tutorial on adding touch. I'm developing a web app and need help. The app is a communication board with pictures that are to play a sound when touched; different sound file for different pictures. Can you please explain how using the information in your tutorial I can apply the playing different sound files depending on which photo it touched? If you don't have something like this available, what and where can your recommend I go for answers and examples. I look forward to your reply and greatly appreciate your time.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 5 лет назад
I have a playlist on multimedia that includes videos for working with audio. Check the homepage for my channel
@MYount
@MYount 3 года назад
Very helpful, thanks.js
@simv.6893
@simv.6893 Год назад
Great job.
@sinefinehabitarevolo
@sinefinehabitarevolo 6 лет назад
Thank you for the great video! How are you serving your app to your remote device?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 6 лет назад
I just have my android device connected with a USB cable. The device is unlocked as a developer device and when prompted I gave permission for the phone to be accessed by my macbook pro. Then with Chrome I am going to the remote devices section of the developer tools to selected which remote browser window I want to display.
@abirpaul9027
@abirpaul9027 3 года назад
Watching this in 2021 great explanation
@ENG-100
@ENG-100 3 года назад
You are Great 🙋‍♂️🤝🌹
@steviewonder580
@steviewonder580 4 года назад
The remote devices thing blew me away! you can do that???
@srinivasulurao
@srinivasulurao 2 года назад
The touch events or any other javascript event doesn't work with the Android Talkback option ON(Accessibility option for disabled people), is there any solution which you know to tackle this problem?
@dolevdo
@dolevdo 2 года назад
thank u very verry much !
@user-mg8pz8hk5g
@user-mg8pz8hk5g 3 года назад
Hi Steve, how to simulate multiple-finger events in Chrome dev tool? No matter how I try, I always end up getting on touch for each touchstart event
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Try using pointer events for multi touch ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rhqeN10bK10.html
@MS-lq6zu
@MS-lq6zu 4 года назад
hey, I want to fire an event on certain condition, example - fire an touch cancel event when any if condition is true, basically i want to remove the touch? thanks in advance
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Sorry. Dont understand your question
@philipkalimo6093
@philipkalimo6093 3 года назад
Thanks!!!
@user-er5wh8mf8s
@user-er5wh8mf8s 5 лет назад
It is write [object TouchList] when I use touchmove ,what I should do ?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 5 лет назад
Touchlist is the array of touches. If your device supports multiple touch points you will find them all in that array
@user-er5wh8mf8s
@user-er5wh8mf8s 5 лет назад
Thank You 👍👍😍
@sourishdutta9600
@sourishdutta9600 5 лет назад
Hi Steve, how can I call apply pinch zoom in and zoom out through javascript for ipad, please help me on that, I need this for my project. I just need the events when zooming in and zooming out on ipad then I will call my custom zoom in zoom out function depending on the finger distance .(I really need to know whether user is zooming in or zooming out though the event). I am going to apply this to my Angular project (where meta initial-scale="0"), I know it can be achievable by hammer.js but I think custom js will be better for this. Please help me how can I achieve that and Thank you very much, your contents are very helpful :)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 5 лет назад
When using the touchmove event you have properties inside the event object, starting with "touches" that allow you to count the number of touch points on the screen. Then you can calculate the difference in the X and Y directions based on all the x,y coordinates. You can store the difference in a global variable to track over time whether the distances are getting larger or smaller.
@sourishdutta9600
@sourishdutta9600 5 лет назад
@@SteveGriffith-Prof3ssorSt3v3 Thanks steve do you have any example of that ? would be helpful to understand and I will definitely give it a try and get back to you on this.I think I got your point ( diff btw x nb y > previous diff of x nd y ) zooming in and vice versa. Please correct me if I am wrong. Thank you
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 5 лет назад
@@sourishdutta9600 This video shows how to get to the touches property. the mouse x and y position are inside each of the touches. I don't have a video where I show doing the math to calculate the distance between two points.
@sourishdutta9600
@sourishdutta9600 5 лет назад
@@SteveGriffith-Prof3ssorSt3v3 ok thank you
@subham-raj
@subham-raj 4 года назад
thanks
@augmentos
@augmentos 4 года назад
So confused, is touchMove the same as scroll? Should eventDelegation be used for touchMove because it sys scroll doesnt use it?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
By default in the vertical direction moving a touch will scroll. However, you can capture the event and stop it propagating if you want some special behaviour. More common would be using a horizontal touchMove to track swiping or panning motions.
@augmentos
@augmentos 4 года назад
@@SteveGriffith-Prof3ssorSt3v3 thank you Steve. I thought I could capture the event but then read that scroll event does not propagate which is confusing me. If vertical touchMove causes scroll doesnt that mean touchMove IS scroll? And why then not delegate the event?
@augmentos
@augmentos 4 года назад
I guess one of the things I am saying is where is this 'scroll' that cannot be propagated, when in fact it seems to be a combination of things that can be.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
They are different things. The scroll event happens to the document. You can ask the page to tell you when it has been scrolled and use that as a trigger for some function. You can also have a scrollable area within the page that can listen for the scroll event. The touchmove event occurs when a finger or a pointer moves across the screen of the device. The page itself can be smaller than the screen and it will not scroll even though a finger is dragging across it. The touchmove is the center point of the touch changing x and y coordinates.
@techieintrading
@techieintrading Год назад
How to restrick double tap or double click using touchstart event?
@SteveGriffith-Prof3ssorSt3v3
What do you mean by restrict? If your code has no listener for double-click then it will not do anything when double clicked. If you want to ignore touches coming too quickly together you can use the Performance API - developer.mozilla.org/en-US/docs/Web/API/Performance/now to get a highres timestamp of when your touch happened. Each time your touch event is triggered you can look at the difference since the last touch happened and decide what you want to do.
@mohammadtajamiri4369
@mohammadtajamiri4369 3 года назад
you have an epic voice
@cliffclof
@cliffclof 2 года назад
How to listen for touch keyboard key events?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
Those would be the keyboard events - keydown, keyup, keypress - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5-koI06rmcA.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WGk-2_dD6L0.html
@chunmaroo
@chunmaroo 3 года назад
Thanks
@KevinTheDane
@KevinTheDane 3 года назад
How do you connect your phone to localhost like that?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Here are a couple videos to help ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-p9ULgJRcKYw.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vRPxwuLhLaM.html
@claravisa4705
@claravisa4705 Год назад
Hi Steve, how do you contect your phone like that? Thanks
@SteveGriffith-Prof3ssorSt3v3
Several videos talking about different ways. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-i7cmhRlZZ24.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-p9ULgJRcKYw.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vRPxwuLhLaM.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DJnwb4Qeq1M.html
@Snoo29293
@Snoo29293 3 года назад
I can't understand very well the difference between ev.touches, ev.targetTouches and ev.changedTouches.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
touches is the list of all the touch points. targetTouches are the targets for all the touches. changedTouches is the array of points that have moved since the last touchmove.
@isi1044
@isi1044 3 года назад
How did you connect your phone to your chrome?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Here is a video on testing mobile with Chrome on Android - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vRPxwuLhLaM.html and another on testing mobile with Safari on iOS - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DJnwb4Qeq1M.html
@gopinathkrm58
@gopinathkrm58 3 года назад
how to connect the mobile to the system browser like yours
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Here is how to connect Android to Chrome - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vRPxwuLhLaM.html and one that shows how to add custom devices to Chrome and some of the newer settings - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-i7cmhRlZZ24.html and here is how to connect Safari to an iOS device - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DJnwb4Qeq1M.html
@Youssef-lv6wp
@Youssef-lv6wp 4 года назад
How to connect your device in the browser sir
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Connect with a USB cable and then, in Chrome, go to the URL chrome://inspect/#devices
@socialkruption
@socialkruption 3 года назад
ahhhhhhhhhhhhhhhhhhhh that mouse clicking is like fingers on the blackboard ahhhhhhhhhhhh!!!!!!!!!!!!!!! Good video tho.
@bhawnadimri6248
@bhawnadimri6248 3 года назад
Not working on Safari browser..!!
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
It does but you have to turn on Responsive design mode. Your development computer likely does not have an actual touch enabled screen. CTRL+CMD+R will toggle this mode. It is also in the develop menu.
@samuelmatheson9655
@samuelmatheson9655 4 года назад
was this recommended because i googled "HTML how 2 swipe" earlier
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Could be...
@bigray712
@bigray712 6 лет назад
no demo?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 6 лет назад
What do you mean? The video is a demo of touchstart, touchend, and touchcancel running on the mobile emulated browser from chrome.
@venusblu3
@venusblu3 5 лет назад
@@SteveGriffith-Prof3ssorSt3v3 Perhaps he is asking what does this paragraph do when it is touched on a device? Does something happen on the page when it is touched?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 5 лет назад
I'm showing in the video that when you touch it I am writing out messages to the console. That's the demo. Touching the screen does nothing else unless you program it yourself. It's up to you what you want to do when you touch the screen. This video is just about the events and how they work, not how to animate things or do anything else. Those are topics for other videos. :)
@Cognitoman
@Cognitoman 6 лет назад
Thanks fo the video I appreciate it, I'm remaking this website www.hugeinc.com . As you can see there is no scrollbar on the right, so I cant use a "scroll" event rather I have to use wheelEvent, key events, and swipe events.
@extreme1679
@extreme1679 6 лет назад
Noice
2 года назад
okay. But what is the point if the tutorial don't show how to apply this? Like learning a bunch of words in another language but not having examples of how to use them in a quote. Don't get me wrong. it is great to learn this as someone who is learning from scratch, but at least it could be announced at the beginning that this is a theory video and not practical
@ICONlike
@ICONlike 5 лет назад
It hurts my ears when you smack your lips, also you sound like the guy, Nealix, from Star Trek Voyager.
@s7mo
@s7mo 2 года назад
i already have todo.addEventListener dragstart, f working. As well as dragend, drag over/enter/leave/drop and it all works on the PC but not mobile. How do I add the mobile functions? Can I combine them with my existing code? Or do separate lines? Does sequence matter? If anyone can provide insight I'd appreciate it.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
On mobile, if you are trying to do something with drag and drop, you have to keep in mind that mobile touch screens are already monitoring all touch interactions and have default behaviours tied to them. Moving your finger up and down on the screen will make it want to scroll the page. Taps and double taps can also have pre-defined behaviours. For touch screens you have to handle the touchstart event and tell it to preventDefault( ) the event for your operation. Just like cancelling a form submission or a anchor click on PC.
@s7mo
@s7mo 2 года назад
@@SteveGriffith-Prof3ssorSt3v3 Can you eye it over on stackoverflow? "Drag and Drop - Works on PC but not mobile. Trying to modify mobile code unsuccessfully" I used preventDefault() but i don't think i am mapping the touch commands to my 100% working drag commands correctly. I have a snippet up too.
Далее
Creating and Dispatching Custom JS Events
12:28
Просмотров 19 тыс.
Learn JavaScript Touch Events In 17 Minutes
17:45
Просмотров 108 тыс.
кукинг с Даниилом 🥸
01:00
Просмотров 2 млн
HTML in 100 Seconds
2:34
Просмотров 642 тыс.
Important differences between textContent and innerText
11:44
Checking for the Existence of JavaScript Variables
9:08
The Best Way to Enable CSS Animations with JavaScript?
13:13