touchend event properties

javascript jquery touch mobile-safari touch-event
Matt Roberts picture Matt Roberts · Aug 25, 2011 · Viewed 50.7k times · Source

If I catch all touchend events from mobile devices with:

$(document.body).bind('touchend', function (e) {
var touch = e.touches[0]; // doesnt work
...

I need to get the touch.screenX, touch.screenY, touch.clientX and touch.clientX from the e paramter. All the examples I've seen suggest that e.touches will be a collection, and you can get at the touch details with e.touches[0]. In my tests on an ipad, e.touches is always undefined. I'm not using any jquery plugins.

Also tried e.targetTouches, which is also undefined.

Can anyone help?

Answer

Gopherkhan picture Gopherkhan · Apr 9, 2012

Actually, released touches will be found in the changedTouches array, ie:

e.changedTouches[0].pageX // get the end x page coordinate for a released touch

I think this is slightly more reliable than going through the originalEvent property.

You can read more on changedTouches here: http://www.w3.org/TR/touch-events/#changedtouches-of-a-touchevent

Related questions

What's the best way to detect a 'touch screen' device using JavaScript?

I've written a jQuery plug-in that's for use on both desktop and mobile devices. I wondered if there is a way with JavaScript to detect if the device has touch screen capability. I'm using jquery-mobile.js to detect the touch …

Read More
Consider marking event handler as 'passive' to make the page more responsive

I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me. Handling of 'touchstart' input event was delayed for X ms due to main thread being busy. Consider marking …

Read More
Binding multiple events to a listener (without JQuery)?

While working with browser events, I've started incorporating Safari's touchEvents for mobile devices. I find that addEventListeners are stacking up with conditionals. This project can't use JQuery. A standard event listener: /* option 1 */ window.addEventListener('mousemove', this.mouseMoveHandler, false); window.addEventListener(…

Read More