Skip to content

Instantly share code, notes, and snippets.

@asimpson
Created January 29, 2013 13:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asimpson/4664308 to your computer and use it in GitHub Desktop.
Save asimpson/4664308 to your computer and use it in GitHub Desktop.
Event bubbling doesn't bubble all the way to the document level on iOS. Here is one way to make that happen.
touchPointer: ->
document.documentElement.style.cursor = "pointer"
# Call this on init
if Modernizr.touch
document.addEventListener "touchstart", touchPointer()
@asimpson
Copy link
Author

Here is some linkage to back this up.

https://github.com/sindresorhus/jquery/commit/fa64ad396b29ea5553837456d31af46fd357ff80

On iOS the "click" event does not bubble up to the document with an exception of inputs and links, it stops right before the body.
Apparently setting the documentElement cursor to pointer fixes this.

http://api.jquery.com/live/
From the jQuery .live documentation

On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:

  • Use natively clickable elements such as a or button, as both of these do bubble to document.
  • Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
  • Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement).
    Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment