Clicking on a span tag on an IOS device does not trigger jquery's .click() event

Remember a compatibility bug of event delegation under ios

Compatibility bugs encountered in the project, record one or two.

There are several controls of the same type on the page, and clicking on them will trigger some events. Obviously, event delegation is better than batch binding. For the convenience of the diagram, I bound the click event to document.body (the same is true for document), and it responds well on Android, but the click event is not triggered on ios!

Tried binding the event to the parent element of the control and the problem went away.

In fact, when using event delegation to add a click event to an element, if the event is delegated to document or body, and the delegated element is not clickable by default (such as div, span, etc.), the click event will fail. If it is clickable (such as button, a tag), the click event is still valid at this time, and special attention should be paid to this.

 

1. Use native elements that support click bubbling to the document, such as aandbutton
2. When delegating an event, delegate to the element below the body

Solution

There are 4 solutions to choose from:

1. ​Bind the  click event directly to the target element (that is  .target)
2. Replace the target element  with <a> or  button wait for a clickable element
3. click ​Delegating events to​​​​​non-  OR  document ​​​parent  body elements
4. ​Add a style rule to the target element cursor: pointer;

The latter two are recommended. From the solution point of view, it is speculated that in safari, the click event of the non-clickable element will not bubble to the parent element. cursor: pointer Make the element clickable by adding  it.