JS Touch Events on Mobile Devices

JS Touch Events on Mobile Devices



all right there's a lot of content out there about the mouse events click mouse over mouse Oh Mouse over most leave a mouse enter mouse moves and so on not as much content about the touch events so we have Mouse events you move your mouse around the screen you click on things interact with elements on the web pages but when you're dealing with a mobile device like a tablet or a phone you don't have a mouse so the events that we're going to be working with our touch start touch and touch cancel and touch move all right so what I have here is a sample web page I don't have any JavaScript really running on this yet inside of here this is my phone which is connected I'm using the chrome developer tools so I've got Chrome open I've got the remote devices open this is my phone I've connected here so this is what I'm working with on my phone you can see I just if I touch the screen on my phone and got the JavaScript coming up all right so here's the page that I have right now as I said these are the events that we have to work with there are not events for swipe swipe left swipe right swipe up swipe down rotate pinch zoom tap DoubleTap those do not exist if you want to use some of those you have to write your own script and you have to use these events to kind of piece that together so in my web page I use my typical add event listener so on my paragraph right here I'm adding an event listener and I'm going to say touch start then I'm gonna run a function called F so in your function f there it is it's going to be passed to e be the event object the same as a click listener would this event object is going to tell me things about the touch where it took place but one thing that's different with a mouse and with the touch you can have multi-touch that means I can touch the screen with one two three four five fingers if you're dealing with multiple styluses or other touch devices you could have multiple points of contact so the touch events deal with those multiple points of contact and we can track those multiple points of content through the event object so let's say I wanted to write out in hot the inside of here touches this property exists inside of every event object touch start touch and touch move touch cancel all of these are going to have access to this property touches all right if I drunk jump back into here refresh this and with one finger at app we can see touch list has inside of it the length is 1 and the first thing inside here is a touch so it's a touch list object evie dot touches was a touch list object and inside of it there was an array where we had item 0 was a touch object and it's gonna give me client ex-client Y so that's the location within the element that I touched page X page Y tells me the area sorry the the space within the page the X&Y coordinates within the entire screen radius tells me the area that was covered by my finger when it touched a rotation angle we're not tracking not screen X screen Y tends to be the same as page X page why we've got a little bit different screen Y and that's because page Y is within the body it's the white space right here screen Y I have extra screen real estate up here this is the chrome within my browser and the chrome down here at the bottom of my browser so I've got a browser open on my phone it has interface parts that are not part of the screen that the person is interacting with not part of the body of the web page right here page X page Y this is a more accurate representation of inside here where I clicked all right target Pete that was my paragraph that I was touching so we've got target we've got page X page Y and those are the things that we're gonna work with most so that is inside touch number zero so this array of touches this list of touches so we can work with that changes there's also another one called changed touches which you will be using from time to time and we have the standard you need a type which is going to there we go touch start that was our type of event that we defined right here now talking about these type names going back to looking at web browsers that are on desktops and laptops and so on if browsers do not support this touchstart event that's okay this is just a string this listener is just listening for somebody to announce that hey I'm a touchstart event you can create whatever ones you want you could say I'm gonna listen for the wind lottery event and when that happens hey look out now this isn't gonna happen on my laptop on my phone on my tablet this event doesn't exist yet I'm gonna do another video about creating custom events but for now this one does not exist so there's no code this function is never gonna be called as a result of this event I can what touch end because touch end is an event refresh this I tap with one finger there we go with a touch start the touch end both of them fired now if I take two fingers and I touch there we go so touch list touch list for touch start this is the first finger this is the second finger so the length was one and then it was two you can see it go from called twice because one finger to finger touch list for end the first one ended so I'm left with a length of one and then when the second finger left I'm down to a length of zero so that's what's happening with the touch end okay and then touchmove that is the touch cancel usually happens some of the process cancels out there's another event that interacts with your browser and says okay forget about the touch thing that you were doing we're doing something else touch cancel gets fired touch move if I do that one this is the one that's gonna get called again and again and again and again as you move your finger around so I touch with one finger there's the touch dirt and I'm selecting text there there we go I'm moving my finger around without selecting text and you can see I got a very long list of touch move events going and these numbers here are changing so 129 376 the one before it 129 376 there we go so 129 from 132 and 383 376 so there was a movement in the x-direction of about three pixels and a movement in the y direction of about seven pixels so touchmove fires constantly again and again and again and we can combine all of these events as I was saying earlier the touch start touch and touch move these are the things where you call functions and inside these functions this is how we would figure out okay how much has this moved is this going to be a swipe am i moving just in the x-direction or just in the y-direction moving in the y-direction and tracking that with touchstart touchmove is probably not something you want to do because there's a default behavior in browsers to move the page up and down to reload the page when you're swiping in that act in that y-direction the top to bottom so left to right sure create your own swipe left swipe right events and we can use those by just upping into the no pun intended tapping into the touch start touch and touch move we can track how far the person's finger has moved we can look at time stamps to see how long it took them are they slowly dragging their finger across the screen maybe they're touching the screen as they're reading or they're trying to pan a little bit left or right or is it a quick little swipe a swiping motion so pan and swipe those are two different types of events and you can use the difference between time stamps to decide whether or not you are moving left moving right with a pan or a swipe all right so I hope that's helped cleared up some of the confusion about what is a touch event what's not I will leave a note here about the things that are not touch events and I will create a code just so that you have that as always thanks for watching if you have any questions please leave them in the comments

Author:

10 thoughts on “JS Touch Events on Mobile Devices”

  • Edessa Media Group says:

    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.

  • 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 🙂

  • 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

  • Thanks fo the video I appreciate it, I'm remaking this website https://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.

Leave a Reply

Your email address will not be published. Required fields are marked *