$(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?

it is my understanding that on iPhone you never actually raise click events... isn't there something like a touch event? — bevacqua, Sep 14 '10 at 03:36
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. — Deepak Kamat, Jun 09 '18 at 08:55

Simon_Weaver · Answer 1 · 2017-11-15T23:30:30.927

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

@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. — Simon_Weaver, Jun 13 '19 at 19:15

Fábio Nicolau de Lima · Answer 2 · 2016-09-02T15:52:40.783

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.

edited Sep 02 '16 at 15:52

answered Feb 19 '13 at 13:13

Fábio Nicolau de Lima

1,484
15
12

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 – Simon_Weaver Jul 05 '13 at 13:48
5

Agreed with @Simon_Weaver. This is an awful answer. – ceejayoz Jul 05 '13 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 – Simon_Weaver Jul 06 '13 at 19:19
2

Despite this being a bad answer - it's important for people to see it and realize why not to do this (you can't even scroll the screen without triggering the event) so I hope it doesn't get deleted – Simon_Weaver May 12 '14 at 00:45
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! – Mr Washington Jul 14 '16 at 14:37
1

Thank you. It just works :) – Oleg Popov Dec 12 '16 at 11:38
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 '16 at 03:35
1

It works perfect with my situation. Thanks! – Snsxn Aug 10 '17 at 10:30
1

This helped me solve my issue. Thanks a lot :) – ByteBuddy May 18 '18 at 10:51

score 30 · Accepted Answer · edited Jul 17 '12 at 13:58

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);    
}

my ipod got hang after adding this code. Is tehre any other way ? — smilyface, Mar 03 '14 at 00:03
this is really overkill - just `cursor: pointer;` is all you need — Simon_Weaver, Jul 25 '14 at 10:54

score 18 · Answer 4 · answered Sep 24 '13 at 20:05

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??

answered Sep 24 '13 at 20:05

nrutas

4,983
2
16
16

thats the smartest and shortest option in many cases i think – Felix Geenen Aug 08 '16 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 `` 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 `` using your preferred method - preferably as a Modernizr test – Simon_Weaver Dec 27 '16 at 18:40

score 2 · Answer 5 · answered Aug 27 '14 at 22:57

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.

score 1 · Answer 6 · answered Jan 06 '12 at 21:41

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().

score 0 · Answer 7 · answered Sep 14 '10 at 03:38

0

Use jQTouch instead - its jQuery's mobile version

answered Sep 14 '10 at 03:38

lock

6,404
18
58
76

6

The official mobile version of jQuery is [jQuery Mobile](http://jquerymobile.com/) (but jQTouch is also pretty good). – BoltClock Sep 14 '10 at 03:40
is it downloadable already? last time i heard it was still conceptual – lock Sep 14 '10 at 08: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 '10 at 10:48

score 0 · Answer 8 · answered Jul 18 '16 at 10:00

0

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

answered Jul 18 '16 at 10:00

Tomasz Świrski

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. – Matthew Schinckel Jul 18 '16 at 10:02

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

8 Answers8

Linked

Related