Read more

How to fix: iPad does not trigger click event on some elements

Arne Hartherz
July 20, 2015Software engineer at makandra GmbH

iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:

<table>
  <tr>
    <td>hello</td>
  </tr>
</table>

^

$(document).on('click', 'tr', function () {
  alert('row clicked')
});

While this works on a desktop browser, clicking the row/cell on an iPad will just do nothing.

Turns out, the iPad will only trigger such events for elements that have

  • the cursor: pointer CSS property set (on the element or via a CSS rule),
  • or an onclick attribute (which may be empty)

So these will both work:

<table>
  <tr onclick="">
    <td>hello</td>
  </tr>
  <tr style="cursor: pointer">
    <td>hello</td>
  </tr>
</table>

This may sound insane, so I set up a jsFiddle so you can see for yourself: http://jsfiddle.net/g38peLvo/ Show archive.org snapshot

Posted by Arne Hartherz to makandra dev (2015-07-20 15:25)