Any ideas on how to implement a 'touchMoveOver' event in Javascript?

Question

I'm faffing around with SVG, specifically for web content aimed at iPad users. I've created a little dial type thingy that I'm calling a "cheese board" that I'd like to use as an interface element.

http://appliedworks.co.uk/files/times/SVGTests/raphael.html

Clicking on a piece of cheese (to keep the analogy going) will do "something". That bit's easy. However, I'd like the user to be able to drag their finger around the 'cheese board', firing a new event (touchesMovedOver?) every time they their finger moves over a new piece of cheese. But I can't figure out how to do it since there's no 'mouseOver' equivalent for touch interfaces.

If the whole thing was made of squares, I could have created some sort of 'rectContainsPoint' method to be called for every 'touchesMoved', but that approach wouldn't work here.

If anyone has any idea about how something like this could be achieved, I'd love to hear it.

Answer 1

I'm not sure how they extend into SVG, but there are definitely methods for handling touch events with JavaScript: http://rossboucher.com/2008/08/19/iphone-touch-events-in-javascript/

Answer 2

I also don't know what happens inside SVG, but I think you should be able to implement it using the "touchmove" event. The Safari Reference Library has a good article about iphone/ipad touch events: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 3

I think you're right that there is no equivalent of the mouseover event for SVG. Check out this think piece by a Flash developer who opines on the sad situation.

the iPhone doesn’t do mouse movement, and if you can’t move the mouse between the mousedown and mouseup events, the difference between mouseup and click becomes meaningless.

Mousedown, in theory, still has a valid function as a separate event that’s fired when the user touches the screen—regardless of what happens later. Unfortunately for theory, that’s not the way it works on the iPhone.

When you touch an element and leave your finger in place for a while, you get the option of de-focusing it (i.e. you’re allowed to state you don’t want to follow this link after all). In JavaScript event terms, I’d expected a mousedown event to fire, but not a click (I was uncertain of mouseup). Instead, no event fires.