Click event handler iPhone: non-anchor elements

I have a results table where each row is a form and the user continues by pressing the submit button for that result. At smaller widths I collapse the table, hide the submit button and add a click event handler to the tr – it works fine, up to a point.

A filter bar was added that uses AJAX to reorder and add to the results so now the DOM is being generated with JS. Usually you can use .on(event, selector, handler) to catch any generated elements, but this won’t work on iPhone or iPad*.

Javascript: touchstart and touchend

I tried using the touch events but found problems when scrolling because those events fire immediately. I could have written something that checks for where the finger started and ended and if it was still over the same element, but frankly that seemed like too much effort for what seemed like a trivial thing.

CSS to the rescue

The solution is as simple as this:

.your-fake-clickable-element {
    cursor: pointer;
}

On the iPhone and iPad an anchor will listen to the click event as you’d expect, but other non-clickable elements get ignored. Seemly adding the new cursor styling tricks them into thinking it’s a natively clickable element.

Thanks to StackOverflow for the solution.

* Unless your element is an anchor

Posted by Emma Sax

March 15, 2013

CSS