5

I have added some simple javascript to a site:

jQuery(document).click(function(){
  alert('click');
});

...and it only fires in iOS when someone clicks on an actual anchor element, button element, or on something with cursor: pointer; CSS.

Specifically, I am seeing this with the Bootstrap 3 fixed navbar menu. When it's open, I have added:

jQuery(document).click(function(){
  jQuery('#navbar-collapse.collapse.in').collapse('hide');
});

to ensure that it closes no matter where someone clicks.

This is not working in iOS (verified on iPhone 4, iPhone 6/6+ and iPads).

It seems that jQuery click events only register on "clickable" elements (A, BUTTON, etc) or elements with cursor: pointer; CSS or onClick='...something...' or even or onClick='' HTML attributes.

So, my question. Is this just me? Does anyone else see this?

Karl Wilbur
  • 5,898
  • 3
  • 44
  • 54
  • It works for me on iOS: http://jsfiddle.net/k98Bn/39/ – Turnip Jan 27 '16 at 20:01
  • It works for you because you are using a clickable element (button) as he said in the question – kpucha Jan 27 '16 at 20:04
  • Reading this seems to indicate that it is definitily an iOS issue: http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery – Karl Wilbur Jan 27 '16 at 20:05
  • Definitely an iOS "issue". It seems that this is by-design: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html – Karl Wilbur Jan 27 '16 at 20:07
  • ?? The example is using `jQuery(document).click` as specified in the question. `document` is not a button – Turnip Jan 27 '16 at 20:15
  • Try, with an iOS device, tapping in the whitespace with the menu open. It should close the menu if the document's onClick even fires as one would expect. – Karl Wilbur Jan 27 '16 at 20:18
  • I'm testing on iPhone 6 and the menu closes when you click _anywhere_ in the document. This Fiddle also works for me on iOS: https://jsfiddle.net/eyxwossq/ – Turnip Jan 27 '16 at 20:21
  • Maybe something strange is happening with JSFiddle. Try this (clean): http://karlwilbur.net/so-35046771.html – Karl Wilbur Jan 27 '16 at 20:45

1 Answers1

8

How apple handles events

By design you need to use a clickable element. So yes, everyone will experience this issue unless they take care of it with a solution similar to this. If it can't be expected to be clicked then it won't be seen that way by IOS.

An excerpt from apples developer page.

Making Elements Clickable

Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave as expected on iOS. In particular, some menus that only use mousemove handlers, as in Listing 6-1, need to be changed because iOS doesn’t recognize them as clickable elements.

Listing 6-1 A menu using a mouseover handler

<span onmouseover = "..."
  onmouseout  = "..."
WHERE TO BUY
</span>

To fix this, add a dummy onclick handler, onclick = "void(0)", so that Safari on iOS recognizes the span element as a clickable element, as shown in Listing 6-2.

Listing 6-2 Adding an onclick handler

<span onmouseover = "..."
  onmouseout  = "..."
  onclick = "void(0)">
WHERE TO BUY
</span>
Hyra Power
  • 291
  • 1
  • 10