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

by

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

More Related Contents:

  1. Why is this jQuery click function not working?
  2. JavaScript: Invoking click-event of an anchor tag from javascript
  3. How to get children id when I click the parent?
  4. How do I detect a click outside an element?
  5. jQuery click events firing multiple times
  6. onClick not working on mobile (touch)
  7. Detecting touch screen devices with Javascript
  8. Mobile Safari: Javascript focus() method on inputfield only works with click?
  9. Need to cancel click/mouseup events when double-click event detected
  10. Triggering a JavaScript click() event at specific coordinates
  11. Attaching click event to a JQuery object not yet added to the DOM [duplicate]
  12. How to completely DISABLE any MOUSE CLICK
  13. How to stop default link click behavior with jQuery
  14. jQuery: keyup event for mobile device
  15. How to check browser for touchstart support using JS/jQuery?
  16. CSS Animation onClick
  17. prevent mobile default keyboard when focusing an from showing
  18. Difference between .click() and actually clicking a button? (javascript/jQuery)
  19. Change CSS properties on click
  20. jQuery function not binding to newly added dom elements
  21. jQuery – How can I temporarily disable the onclick event listener after the event has been fired?
  22. How to add click event to an element?
  23. Registering jQuery click, first and second click
  24. How to remove all click event handlers using jQuery?
  25. Programmatical click on -tag not working in Firefox
  26. how to intercept Button click inside UIWebview on IOS?
  27. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  28. jQuery .on() method doesn’t see new elements
  29. Cancel click event in the mouseup event handler
  30. Uncaught ReferenceError: Invalid left-hand side in assignment

Leave a Comment