SoFunction
Updated on 2025-04-03

Solution to the invalidation of Safari click event under iOS

Preface

This article mainly introduces to you the relevant solutions for the invalidation of the Safari browser click event under iOS. We will share it for your reference and learning. I won’t say much below, let’s take a look at the detailed introduction together.

Problem description

When adding a click event to an element using delegate, if the event is delegated to a document or body, and the delegated element is unclickable by default (such as div, span, etc.), the click event will be invalid.

You can use the following code to test it in iOS.

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
 <title>iOS click bug test</title>
 <style>
 .container {
 }
 .target {
  display: block;
  text-align: center;
  margin: 100px 30px 0;
  padding: 10px 0;
  border: 1px solid #ccc;
 }
 </style>
</head> 
<body> 
 <div class="container">
 <div class="target"> Click Me! </div>
 </div>
 <script src="///jquery-2.1."></script>
 <script type="text/javascript">
 // Or $(document).on('click', ......) $('body').on('click', '.target', function (e) {
  alert('click');
 });
 </script>
</body>
</html>

Solution

There are 4 solutions to choose from:

  • ​Bind the click event directly to the target element (i.e. .target)
  • Change the target element to clickable elements such as <a> or button
  • Delegate the click event to a parent element that is not a document or body
  • Add a style rule to the target elementcursor: pointer;

​The latter two are recommended.

From the solution, it is speculated that in safari, click events for unclickable elements will not bubble to the parent element. By addingcursor: pointer Makes the element clickable.

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.