2

I am having trouble being able to debug this issue: If you check out this jfiddle on the iPad, you'll see you can click on each circle to change the content above. When you hold on one circle you will see it turn green (image swap).

http://jsfiddle.net/SWj9m/

Now, take your finger and hold on one, and then drag your finger up, or use another finger to click another ring while holding on the previous one. Now, the iPad touch event gets confused, and the green (touchstart) events stay in place rather than leaving. We end up with multiple circles stuck in green meaning that the touchend event never occurred.

Anyone see this issue before or have an idea how to even approach debugging?

This snippet shows the touchstart/end events

                    applications.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart applications circle');
                        this.setFill({ image: images.applicationshover});
                        layer.draw();
                    });
                    applications.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup applications circle');
                        this.setFill({ image: images.applicationsimage});
                        layer.draw();
                    });
RooWM
  • 583
  • 9
  • 23
  • Even on the touch tutorial on the site: http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ open this up on your ipad, touch the red circle, and drag your finger off—the touchstart event stays until you touch the circle again. Maybe there is some way to creat a script that says 'if touchmove goes out of canvas, then touchend'? – RooWM Dec 18 '12 at 14:46

1 Answers1

2

I'm barely a beginner with kineticjs but I'll take a stab at it since the question has been sitting here unanswered for a while.

Unfortunately the touch and mouse events don't parallel each other as much as you might hope. The "touchstart" is analogous to "mousedown" not to "mouseover," and "touchend" is like "mouseup" not "mouseout." I'm hitting a similar problem in some of my own code.

The best idea I have for this is to use "mouseover" and "touchmove," which seem to be analogous. On mouseover/touchmove or mousedown/touchstart in any ring, set that ring to green and set all the other rings back to blue. Also, on mouseup/touchend set all the rings to blue.

That still leaves one case unhandled, when the user touches the outer ring, then moves out to the background, then ends the touch. You're using "mouseout" to handle that for the desktop but there's no "touchout" to do the same for an ipad. In my code for a similar situation I added a listender for window.touchend. I haven't tried it but another idea I had was to have a layer with a rectangle the size of the stage as a background layer, and watch for touchend occurring on that object.

If that's not the best way to approach this then hopefully someone who actually knows what they're talking about will step in to set me straight!

d2point7
  • 21
  • 2
  • I actually ended up using only 'tap' successfuly: http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ – RooWM Feb 19 '13 at 00:08