touch - Javascript ontouchstartmoveend - getting wierd results - Stack Overflow

admin管理员组

文章数量:1394203

I'm building this image gallery with swipe functions for tablets/smartphones. I was getting pretty odd results on the iPad so I decided to track it all the way back to the beginning and just print out when the different events occured.

The following code was supposed to alert something like: "start.move.move.move.end" after I've pleted a swipe with my finger (the number of 'move's is determined by how long the swipe action is).

        itemWrap[0].ontouchstart = function(e) {
            _self.msg.push("start");

        }

        itemWrap[0].ontouchmove = function(e) {
            _self.msg.push("move");
        }

        itemWrap[0].ontouchend = function(e) {
            _self.msg.push("end");

            // join messages and alert to browser
            msg = _self.msg.join(".") || "empty";
            alert(msg);
        }

However, I'm getting very strange alerts, and they differ quite significantly on Android/iOS devices. On Android the results look as excpected most of the time:

"start.move.move.move.move.end"

"start.end" (when just flicking the screen)

"start.move.start.end" (this happens every other touch action)

But on the iPad I'm getting some really strange results. On the first touch action I'm getting exactly what I'm expecting, but on the second touch the alert containing the results ("start.move.move.move.end") fires immediately upon touching the screen, and it always contains the previous results. When I touch the screen the third time it is back to regular operation again, and so it goes for every other touch action.

I've looked around for someone with a similar problem but the closest I seem to get are users having problems with multi-touch actions (which I'm not interested in). Any suggestions as to why this is happening?

I'm building this image gallery with swipe functions for tablets/smartphones. I was getting pretty odd results on the iPad so I decided to track it all the way back to the beginning and just print out when the different events occured.

The following code was supposed to alert something like: "start.move.move.move.end" after I've pleted a swipe with my finger (the number of 'move's is determined by how long the swipe action is).

        itemWrap[0].ontouchstart = function(e) {
            _self.msg.push("start");

        }

        itemWrap[0].ontouchmove = function(e) {
            _self.msg.push("move");
        }

        itemWrap[0].ontouchend = function(e) {
            _self.msg.push("end");

            // join messages and alert to browser
            msg = _self.msg.join(".") || "empty";
            alert(msg);
        }

However, I'm getting very strange alerts, and they differ quite significantly on Android/iOS devices. On Android the results look as excpected most of the time:

"start.move.move.move.move.end"

"start.end" (when just flicking the screen)

"start.move.start.end" (this happens every other touch action)

But on the iPad I'm getting some really strange results. On the first touch action I'm getting exactly what I'm expecting, but on the second touch the alert containing the results ("start.move.move.move.end") fires immediately upon touching the screen, and it always contains the previous results. When I touch the screen the third time it is back to regular operation again, and so it goes for every other touch action.

I've looked around for someone with a similar problem but the closest I seem to get are users having problems with multi-touch actions (which I'm not interested in). Any suggestions as to why this is happening?

• javascript
• touch
• coordinates
• swipe

Share Improve this question Follow asked Mar 2, 2012 at 8:28 Anton LundbergAnton Lundberg 11311 silver badge66 bronze badges 1

• Not sure if that's the same thing here, but I noticed, that touch events from javascript are ing in in incorrect order sometimes. End events are getting in before move events, maybe that's why get these kind of results, but afaik that's not only the case for iPad but also for android. – jimpic Commented May 15, 2012 at 6:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You have to remember that a touch is a multi-touch and it's not like a mouse event which is always one. Each time you get touch event (touchstart, touchstart, touchend) you get also identifier

itemWrap[0].ontouchstart = function(e) {
    // e.touches.length - number of touches
    // e.touches[e.touches.length - 1].identifier - last touch is the last one on the list
    // e.touches[e.touches.length - 1].pageX and .pageY - place of the touch
    _self.msg.push("start");
}

So when you do touchmove and touchend you have to check that identifier to see which touch was moved or ended. You can do it by saving that data in touchstart:

var t = {pageX:event.touches[index].pageX, pageY:event.touches[index].pageY, identifier:event.touches[index].identifier};
touches.push(t);

And then find correct touch in touchend by using

event.changedTouches[0].identifier

here you don't need to go through that list because it's always just one but you have to pare that identifier with these you saved in the list.

Hope this will help.

本文标签： touchJavascript ontouchstartmoveendgetting wierd resultsStack Overflow