2010.09.28

The lost art of delegating click events on the iPhone

Today I saw on Peter-Paul Koch blog that event delegation for click events on <div> elements doesn’t work properly on the iPhone. Strangely enough, I’ve implemented it 4 days ago (as you can see on this commit) without ever experiencing any kind of problem, that made me insanely curious/scared, specially since I wasn’t doing anything special/different than him and I couldn’t understand what I was doing right/wrong…

Theory 1

My first theory was that the problem only existed on other iOS versions, but after running his tests on the same iPhone I was using to test mine and confirming that the problem really existed – I usually borrow the company’s iPhone since I own the cheapest phone that you can find, which can barely load a plain HTML page… - I’ve discarded this theory…

Theory 2

Something on my framework abstraction was “fixing” the problem, even though it doesn’t make any sense, but It was easily debunked after removing the framework specific code.

Theory 3

I was lucky. (Confirmed as described below..)

Solution / The Real Problem

After a couple minutes trying out different iterations of the same test, I’ve figured out that the Event was actually being bubbled up but it simply never reached the <body> or the document. My original implementation was working for a simple reason, I wasn’t attaching the event listener to the document but instead I was attaching it to a <div> element that was at least 1 level up on the DOM tree…

Here are the test files in case you want to check out:

Now that I understood what was going on I can move on…

PS: the first implementation (coded 4 days ago) is from my fork of the zepto.js framework which has a different structure/API/implementation from the main branch.


Comments

Developing javascript is working in a hostile environment.

Leave a Comment

Please post only comments that will add value to the content of this page. Please read the about page to understand the objective of this blog and the way I think about it. Thanks.

Comments are parsed as Markdown and you can use basic HTML tags (a, blockquote, cite, code, del, em, strong) but some code may be striped if not escaped (specially PHP and HTML tags that aren't on the list). Line and paragraph breaks automatic. Code blocks should be indented with 4 spaces.