Question

I have the following code where I want to get a click event if the user clicks on any item within a list: (I know inline onClick is oldschool, its easier to get things up and running and I’ll change it later).

<ul>
<li id = "li1" onclick="audioClick(event, 'li1', 'url');">
  <img id = "track_image" src="image.jpg" />
  <div id = "track_title">Title</div>
  <div id = "artist_name">Name</div>
  <div id = "release_date">Date</div>
  <a  href="another url"><img id = "visit_website" src="visit_website_icon.gif"/></a>
  <div id = "controls">
      <audio controls></audio>
  </div>
</li>

If I run this using KomodoEdit and Chrome it all works i.e. audioClick() gets invoked. However on iPhone if the user clicks on the controls it doesn’t.

Is this likely to be a feature of the iPhone browser, or something fundamentally incorrect with my code?

(I’m putting the controls in the div as it seems there’s no way to position them using .css, so by putting them in the div I can position that instead).

Answer 1

Click event delegation can be quirky on the iPhone.

Read:

• http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
• http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html

You might want to try touch events.