In some versions of iOS, the mousedown event handler does not work correctly, but it still works properly on other devices like Android.

The solution is to avoid using the mousedown event handler on mobile devices and use touchstart instead. However, it is uncertain if the triggering order will be affected. Originally, in the click event, the blur event would trigger first (if present) and then the click event would be triggered. The reason mousedown was used instead was to avoid this point.

Perform a simple experiment on CodePen:

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="kjj6198" data-slug-hash="jOrVygy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="touchstart-test">
  <span>See the Pen <a href="https://codepen.io/kjj6198/pen/jOrVygy">
  touchstart-test</a> by 愷開 (<a href="https://codepen.io/kjj6198">@kjj6198</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

It can be observed that the triggering order is touchstart > mousedown > blur. It seems that if both touchstart and mousedown events are added and both events are supported, they will occur in the order of touchstart > mousedown.

I searched online and found that mousedown events are not triggered only in iOS versions earlier than 13, and they work normally in iOS 13 and later. Additionally, on iPad, it seems possible to determine whether the touch is from a finger or an Apple Pencil.

Conclusion

• Be cautious when using mousedown or similar bindings on iOS, and try to use touch-related events instead.
• iOS 13 and iOS versions earlier than 13 are a dividing point and require separate testing.

I'm noting this down here for now, and will add more detailed behavior later.