Jayant's Blog

Tuesday, September 16, 2008

iPhone SVG Events

The way the events work on a browser is pretty simple. If you want to listen to a particular event (say mousedown) on the whole document, you simply add an event listener to the document: document.addEventListener("mousedown", listenerFunction, false);. Setting 'false' for the 'useCapture' argument sets the event to bubble, which is the preferred event flow.

The test that we have is really simple. On your iPhone, the page renders a circle, a rectangle & of course these are rendered within a SVG container which is created within a background div. Tap on the circle, then rect and finally the background div. The test pages have 'touchstart' or 'click' event listeners registered by default. Click the 'Add'/'Remove' buttons to add/remove event listeners from the SVG element. There are 2 listener functions, one for logging document events and one for svg events. The events are logged with 'short function name: event.type : event.target'.

If you didn't know this already, you can enable the debug console in Safari on the iPhone.

Now, on the iPhone, the 'touchstart' event is similar to the 'mousedown' on a browser. Go to http://ecodevil.net/dev/blog/events_touch.html using your iPhone. Click on the circle, then rect and finally the white background. You should see 3 events logged.



Now click on the 'Add' button and as expected you will see 1 event (for the button). Now clear the console and click the circle, rect & background again. This time, you will have 5 events logged.



This is actually the expected behavior.

Now from your desktop Safari, go to http://ecodevil.net/dev/blog/events_click.html. You can enable your developer menu as well, see 'Safari Developer FAQ'. You will notice that you have 3 click events logged.



Now click on the 'Add' button and try the test again. You will once again have 1 + 5 events.



Again try http://ecodevil.net/dev/blog/events_click.html using your iPhone 2.1. When you run through the first set of tests, you will see no events logged.



Now click on the 'Add' button and try the test again. You will now see 4 events logged, but there is no click event on the background div.



So What?
So basically, events don't work exactly the same on the iPhone as the desktop browser. On a desktop browser, if an event listener is registered to listen to a particular event on the document, any event of the same type, on any element on the document bubbles up and will be logged, unless the event is stopped from propagating. But seems like on the iPhone, the touch/gesture events work by default on the document as well as the SVG element. But for the click/mouse* events to work on the document, there needs to be an event listener registered to listen to the SVG element. And removing this event listener will stop all click/mouse* events on the document.

Labels: , ,

4 Comments:

  • Hi,

    Are you able to have your SVG shape instances response to touchstart, etc? No matter what I do, I cannot get them to response to touch events!

    Thanks

    By Blogger markww, At Nov 26, 2008, 9:48:00 PM  

  • Check out http://ecodevil.net/dev/blog/events_touch.html. The touchstart event works, given I registered the event handler to the document object. As I state in the 'So What?' section, there are some differences between the iphone & desktop Safari versions.

    By Blogger Jayant, At Jan 10, 2009, 7:02:00 PM  

  • Hi Jayant, thanks a bunch for your tips, I've found them extremely useful. However, I noticed that in your example the SVG is dynamically generated by manipulating the DOM of the HTML file (and the touchstart event is bound at the same time). In my application (a web app for the iphone) I would prefer to load an external SVG, access its DOM and attach the event listeners. This doesn't seem to work though. I can attach normal mouse derived events, but not the Cocoa touch based events (touchstart etc). Have you any insight into this issue? I realize I could just dynamically generate the same SVG inline (a simple matter of copying the SVG markup) but in terms of managing resources for the app, I'd rather not do that. Any help would be greatly appreciated! Thanks again

    By Blogger J. A. Sutherland, At Nov 26, 2009, 8:42:00 AM  

  • This comment has been removed by the author.

    By Blogger J. A. Sutherland, At Nov 26, 2009, 8:43:00 AM  

Post a Comment

Subscribe to Post Comments [Atom]



<$I18N$LinksToThisPost>:

Create a Link

<< Home