Question

78

Mobile Safari sometimes does not trigger the click event

rated 0 times [ 82] [ 4] / answers: 1 / hits: 40021 / 10 Years ago, fri, june 6, 2014, 12:00:00

This is a dynamic JavaScript application I am working on. I have many <a> anchor elements that have a class. When that class is clicked, something should happen. This works fine in Firefox, Chrome, IE, but in some cases the click event is not triggered on mobile Safari (iPad and iPhone).

These elements all have exactly the same CSS, it's just their position that differs (they are in different containers).

I tried various solutions that I found here but with no luck. For instance:

setting the cursor to pointer

the code in this answer

Do you have any other idea that might help me find a solution to this? Why does the click event triggers only in some cases?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ignacio

Add To Favorites

Follow

Total Points: 467

Total Questions: 128

Total Answers: 79

Location: Luxembourg

Member since Tue, Mar 14, 2023

1 Year ago

ignacio questions

1 `npm install` fails on node-gyp rebuild with `env: python: No such file or directory` on mac pro m1

Tue, Aug 16, 22, 00:00, 2 Years ago

1 Invalid configFile (Cypress 10.0) - cannot find module

Fri, Jun 10, 22, 00:00, 2 Years ago

1 Switch' is not defined react/jsx-no-undef

Fri, Jun 4, 21, 00:00, 3 Years ago

1 Adding Header & Footer for all screens in JSPDF

Fri, Apr 23, 21, 00:00, 3 Years ago

1 Find the total of members online/offline Discord.js

Wed, Jul 22, 20, 00:00, 4 Years ago

View All

answered 10 Years ago gerardamosy · Accepted Answer

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