110

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?

3
  • 3
    it is my understanding that on iPhone you never actually raise click events... isn't there something like a touch event?
    – bevacqua
    Sep 14, 2010 at 3:36
  • 1
    probably could Christopher. Its just example code though.
    – Garrows
    Sep 14, 2010 at 12:54
  • Faced this issue recently, all you need is cursor: pointer or use an element that is supposed to have that by default like a, button etc. Jun 9, 2018 at 8:55

8 Answers 8

260
+100

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

2
  • what if its an <a> child element of <li> does that affect this solution? i used jquery to find my <a> with class name, and then used [0].click() vanilla JS to click, and can't get click to register on iOS
    – Akin Hwan
    Jun 13, 2019 at 19:03
  • 1
    @AkinHwan this solution is really only about explicit ‘clicking’ with a finger on iOS. You’re saying it works ok on other platforms?There may be certain calls to click() that iOS vetos - especially if it’s on a video. (You can’t play a video with audio without iOS detecting a true touch event from the user). You should try alert($(‘....’)[0].click) to make sure you’re really getting a click handler (deliberately no parenthesis after click). iOS does weird things so if you’re able to run the action some other way that’s best - eg. set window.location. Make a new question if this doesn’t help. Jun 13, 2019 at 19:15
33

Change this:

$(document).click( function () {

To this

$(document).on('click touchstart', function () {

Maybe this solution don't fit on your work and like described on the replies this is not the best solution to apply. Please, check another fixes from another users.

9
  • 19
    tada NO! tada this is horrible - well at least if you want to capture a 'click' event on an arbitrary DIV it is. you can't even drag the screen up without triggering the event. grr Jul 5, 2013 at 13:48
  • 5
    Agreed with @Simon_Weaver. This is an awful answer.
    – ceejayoz
    Jul 5, 2013 at 14:06
  • 2
    I didn't want to sound too mean, but when I tried this the behavior was so awful that it made me frustrated! (even though I got the exact behavior I was expecting) Fortunately (see my other answer) there is a better, incredibly simple solution Jul 6, 2013 at 19:19
  • 12
    While most people describe this answer as terrible this solution could be very handy in some (specfic) cases. Imagine for example you want to close a menu on mobile on click this would be a very efficient solution! Jul 14, 2016 at 14:37
  • 8
    @MrWashinton is correct, the other users should be ashamed by their overreactions. This is the only acceptable approach for several specific situations.
    – Nick Coad
    Dec 20, 2016 at 3:35
30

Adding in the following code works.

The problem is iPhones dont raise click events. They raise "touch" events. Thanks very much apple. Why couldn't they just keep it standard like everyone else? Anyway thanks Nico for the tip.

Credit to: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

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

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

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
       case "touchstart": type = "mousedown"; break;
       case "touchmove":  type = "mousemove"; break;        
       case "touchend":   type = "mouseup"; break;
       default: return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                          first.screenX, first.screenY, 
                          first.clientX, first.clientY, false, 
                          false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}
3
  • my ipod got hang after adding this code. Is tehre any other way ?
    – smilyface
    Mar 3, 2014 at 0:03
  • Base link leads to Page not available error May 1, 2014 at 20:34
  • 8
    this is really overkill - just cursor: pointer; is all you need Jul 25, 2014 at 10:54
18

try this, applies only to iPhone and iPod so you're not making everything turn blue on chrome or firefox mobile;

/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');

basically, on iOS, things aren't "clickable" by default -- they're "touchable" (pfffff) so you make them "clickable" by giving them a pointer cursor. makes total sense, right??

2
  • thats the smartest and shortest option in many cases i think Aug 8, 2016 at 16:53
  • 2
    this is really inefficient and doesn't account for elements added later. it is far better to add the pointer css as needed to the elements that do need it (remember it isn't needed for <a> tags in the first place) and not globally like this. if this is REALLY what you choose to do you should have a css rule like html.cursorpointer * { cursor: pointer } and then add .cursorpointer to <html> using your preferred method - preferably as a Modernizr test Dec 27, 2016 at 18:40
2

CSS Cursor:Pointer; is a great solution. FastClick https://github.com/ftlabs/fastclick is another solution which doesn't require you to change css if you didn't want Cursor:Pointer; on an element for some reason. I use fastclick now anyway to eliminate the 300ms delay on iOS devices.

1

On mobile iOS the click event does not bubble to the document body and thus cannot be used with .live() events. If you have to use a non native click-able element like a div or section is to use cursor: pointer; in your css for the non-hover on the element in question. If that is ugly you could look into delegate().

0

Use jQTouch instead - its jQuery's mobile version

3
  • 6
    The official mobile version of jQuery is jQuery Mobile (but jQTouch is also pretty good).
    – BoltClock
    Sep 14, 2010 at 3:40
  • is it downloadable already? last time i heard it was still conceptual
    – lock
    Sep 14, 2010 at 8:08
  • Sadly, it did not work. I did only include the library without changing my javascript. It seems like jQTouch should overload the $(document).click function.
    – Garrows
    Sep 14, 2010 at 10:48
0

Include this to your project. Check the "Readme" on github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix

1
  • 1
    Links sometimes go away: consider reproducing the explanation for how the problem is fixed by this package, as well as including the link. Jul 18, 2016 at 10:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.