The pure JS approach is sweet.
Unfortunately detecting "ontouchstart" is not always a right approach. There are some "desktop" devices with touch screens (like my own Yoga 13).
Well, as long as there are different devices there will never be a universally ubiquitous experience, but you can cover most use cases, including hybrid touch devices, by combining ontouchstart with click events (or the modernizr class with media queries).
I guess that's why the title says iOS? I'm assuming there'd still be a large amount of front-end devs looking for just that.
I know and understand your point, and my point is: do not make assumptions. (and your samples will affect not only iOS browsers)
I hate to be Captain Buzzkill, but technically Modernizr.touch and ontouchstart indicate support for touch events, not necessarily a touch screen. There are lots of cases where the user isn't using a touchscreen, but those properties are true anyway. More info: https://github.com/Modernizr/Modernizr/issues/548
This is admittedly a pretty lame limitation. The good news is that with CSS4, you'll be able to use media queries to see whether the user's input device supports hover. Until then, styling stuff based on Modernizr.touch will work most of the time, but be prepared for some false positives.
Exactly my point.
Again, with hybrid screens, most use cases can be worked around even by combining the .no-touch class with media queries and combining the touch API JS with click events - tell me a device that you use or can think of on which this wouldn't work and I can probably think of a workaround. Unless it's a Palm Pre with Web OS.
Also, the title is disabling hover for iOS, so technically there's no problem with those methods for that.