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  lt img gt   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

User · Answer

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

User · Answer

Use jQTouch instead - its jQuery s mobile version

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Short answer    lt style gt       clickable-div                 cursor  pointer         lt  style gt      Longer answer   It s important to realize that if you re just using  lt a gt  tags everything will work as expected  You can click or drag by mistake on a regular  lt a gt  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  lt a gt   I found out about this problem when I had such a panel that I wanted to be entirely clickable    lt div class  clickable-div  data-href  http   www stackoverflow com  gt        clickable content here  images text        lt  div gt    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     lt style gt       clickable-div                 cursor  pointer         lt  style gt    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

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

Examples related to javascript

Examples related to jquery

Examples related to iphone

Examples related to click

Examples related to onclick