Issues with mousedown Event Triggering on iOS
In certain versions of iOS, mousedown handlers do not work properly, although on other devices (like Android, etc.), mousedown still works as expected.
The workaround is to avoid using mousedown handlers on mobile devices and use touchstart instead. However, will the execution order be affected? Originally, in a click event flow, blur triggers first (if applicable) before the click event fires; mousedown was used specifically to circumvent this.
A simple experiment on CodePen:
See the Pen touchstart-test by 愷開 (@kjj6198) on CodePen.
We can see that the trigger order is touchstart > mousedown > blur. It seems that when both touchstart and mousedown events are bound, and both are supported, they will fire in the order of touchstart > mousedown?
After looking it up online, I found that the mousedown event only fails to fire on iOS < 13; it works normally starting from iOS 13. Additionally, on iPads, it seems possible to distinguish whether a touch comes from a finger or an Apple Pencil.
Conclusion
- Be cautious when binding events like
mousedownoniOS; prefer touch-based events where possible. - iOS 13 and iOS < 13 mark a dividing line, so separate testing is necessary.
Recording this here for now, and I’ll follow up later with more detailed behaviors.
Related Posts
- Recreating My Room with Three.js Using React Three Fiber, I brought my real room into the browser—turning physical objects into an interactive table of contents, and using spatial memory to tell the story of my life and work over the past few years.
- Things to Keep in Mind When Using Images in Frontend Development Expanding on Jake Archibald's article, this post organizes how modern responsive images should be written: why width/height are still necessary, when to use CSS aspect-ratio, how to choose between AVIF and WebP, and using picture/source/srcset for art direction on mobile devices.
- CSS field-sizing — Auto-resize Form Elements with a Single Line of CSS Previously, auto-resizing a textarea required listening to scrollHeight in JavaScript. With CSS field-sizing: content, a single line replaces it all, supporting textarea, input, and select. This article covers the pain points of older approaches and how to use field-sizing.
- Make Your Link Underlines Look Better: text-underline-offset By default, underlines sit very close to the text. Some designers dislike this look, and personally, I don't think it looks great either.