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.