Tapping and holding on a DIV causes Safari to select (i.e. highlight) the surrounding text and the phone to vibrate, even if this DIV has a user-select property set to none. This is very annoying in the context of my app. It seems to be specific to iOS 13 and its Haptic Touch.

I tried to e.preventDefault() on the touchstart event and it worked, but at the same time disabled scrolling capabilities.

I also tried to e.preventDefault() on the webkitmouseforcewillbegin event, as remended in the Apple documentation, but this didn't work at all.

Anyone knows how to fix this?

Video:

Tapping and holding on a DIV causes Safari to select (i.e. highlight) the surrounding text and the phone to vibrate, even if this DIV has a user-select property set to none. This is very annoying in the context of my app. It seems to be specific to iOS 13 and its Haptic Touch.

I tried to e.preventDefault() on the touchstart event and it worked, but at the same time disabled scrolling capabilities.

I also tried to e.preventDefault() on the webkitmouseforcewillbegin event, as remended in the Apple documentation, but this didn't work at all.

Anyone knows how to fix this?

Video: https://youtu.be/SstDm0M8RN0

• javascript
• safari
• ios13

1 Answer 1

Calling event.returnValue = false; from all touch events (touchstart, touchend, touchmove, touchcancel) prevents from the surrounding text selection. Here is fiddle: https://jsfiddle/j_u_l_e_e/yLdt1s4o/