$(document).click() not working correctly on iPhone. jquery

Question

This function works perfectly on IE, Firefox and Chrome but when on the iPhone, it will only work when clicking on a <img>. Clicking on the page (anywhere but on a img) wont fire the event.

$(document).ready(function () {
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

The HTML part is extremely basic and shouldnt be a problem.

Any ideas?

Answer 1

Short answer:

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

---

Longer answer:

It's important to realize that if you're just using <a> tags everything will work as expected. You can click or drag by mistake on a regular <a> link on an iPhone and everything behaves as the user would expect.

I imagine that you have arbitrary HTML that is not clickable - such as a panel containing text and images that cannot be wrapped with <a>. I found out about this problem when I had such a panel that I wanted to be entirely clickable.

<div class='clickable-div' data-href="http://www.stackoverflow.com">

 ... clickable content here (images/text) ...

</div>

To detect a click anywhere within this div I am using jQuery with a data-href html attribute which is shown above (this attribute is invented by myself and is not a standard jQuery or HTML data attribute.)

$(document).on('click', '.clickable-div', function() {

    document.location = $(this).data('href');

});

This will work on your desktop browser but not iPad no matter how much you click.

You may be tempted to change your event handler from click to click touchstart - and this indeed does trigger the event handler. However if the user wants to drag the page up (to scroll) they'll trigger it too - which is a terrible user experience. [you may have noticed this behavior by sneaky banner ads]

The answer is incredibly simple: Just set the css cursor: pointer.

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

This had the added benefit for desktop users to indicate the area is clickable with a hand icon.

Thanks to https://stackoverflow.com/a/4910962/16940