Mobile Safari Sometimes Does Not Trigger the Click Event

Mobile Safari sometimes does not trigger the click event

The click event resulting from a tap on iOS will bubble as expected under just certain conditions -- one of which you mentioned, the cursor style. Here is another:

The target element, or any of its ancestors up to but not including
the <body>, has an explicit event handler set for any of the mouse
events. This event handler may be an empty function.

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

This is much better fix vector, and can be done without a browser check. You do have to add an extra div due to the "not including the <body>" part:

<body>
  <div onclick="void(0);">
    <!-- ... all your normal body content ... -->
  </div>
</body>

Now every click event originating inside that div will bubble as expected in iOS (meaning you can catch them with $(document).on('click', '.class', etc...)).

Safari on iOS 9 does not trigger click event on hidden input file

Three things are causing this problem:

At javascript, removing return false; of the event listener.
At the stylesheet, the element which calls the action must have the property cursor: pointer;. Probably Apple put this requirement in these calls for best feedback on a user interface.
Again at the stylesheet, we can't set display: none; for hidden input because some browsers don't accept clicks on elements that aren't displayed.

Link to a fixed example on JSFiddle

On click events are not working on iPad but working on desktop and mobile

Connect iPad to Mac machine and check the clickable area. Sometimes, clickable(tap) area may not be in right place or may be area is in collapsed state like 0 width or 0 height. There is also possibility that another invisible layer is above clickable area. Without connecting to Mac machine, it is difficult to debug. Click event should trigger the touch or tap event without fail otherwise.

Click events not firing on iOS

If you add this style to the <li> element, it works:

li { cursor: pointer; }

JSFIDDLE DEMO

It seems to be a bug with iOS events – reference.

A click in iOS Safari triggers a "hover state" on element underneath where you tapped

If you have option to disable hover then you can do that with bit of hack.

First add this line in "DOMContentLoaded" event handler.

var canHover = !(matchMedia('(hover: none)').matches);
if (canHover) {
  document.body.classList.add('can-hover');
}

It will add .can-hover class to body of your html document.

Then just edit a:hover rule to match this instead

your css rule:

a:hover {
  color: red;
}

should be:

.can-hover a:hover {
  color: red;
}

this should prevent devices with touch screen to apply hover style to any anchor.

Mobile Safari Sometimes Does Not Trigger the Click Event