Javascript - touchstart and touchend locations

Question

I would like to get the touchstart and touchend locations if element "#menu" is touched.

I wrote this code, but the event doesn't seem to trigger at all:

        var lastLoc = 0;

        $(document).on('touchstart', '#menu', function(e) {
            lastLoc = e.originalEvent.touches[0].pageX;
        });

        $(document).on('touchend', '#menu', function(e) {
            var newLoc = e.originalEvent.touches[0].pageX;
            alert("lastLoc = "+lastLoc+", newLoc = "+newLoc);
        });

As far as I know this should work.

Thanks in advance.

score 2 · Accepted Answer · edited May 23 '17 at 11:44

The touchend event should, logically, have zero touch points, only changedTouches.

Here's a demo.

function startHandler (e) {
    window.console.log('Start:', e.originalEvent.touches[0].pageX);
}

function endHandler (e) {
    window.console.log('End:', e.originalEvent.changedTouches[0].pageX);
}



$(document).on('touchstart', '#menu', startHandler);
$(document).on('touchend', '#menu', endHandler);

See also: Simulating touchstart and touchend events? if you are having trouble testing touch events.

score 0 · Answer 2 · answered Feb 10 '15 at 13:26

0

You need to test the touch event on a touchable surface such as a smartphone or a tablet. In Google Chrome there is a way to simulate this function.

answered Feb 10 '15 at 13:26

julio

2,762
4
22
34

score 0 · Answer 3 · answered Feb 10 '15 at 13:29

0

Sorry for your trouble, I ended up using jquery mobile's "swipeleft" Thanks anyway :)

answered Feb 10 '15 at 13:29

Javascript - touchstart and touchend locations

3 Answers3