How to disable touch action for on single HTML Element in iOS

Question

I need to disable touch action on html element for some reason. I have tired with CSS property touch-action: none. But it is not working for Safari and iOS devices. Is there any way to disable touch action for html elements on iOS.

Answer 1

If you don't mind click events and other pointer event also being stopped, you can try pointer-events:none; in your CSS. If you want this to be specific to mobile devices, you can apply it using media queries. If you want it only on iOS you can do user agent sniffing in JS [As done in @Denno's Answer] and apply a class with that style on it to your element .

Answer 2

Whilst it's not recommended, you can use user agent sniffing to determine if a user is on an iOS device

var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Then, using that in an if condition, create an event listener to listen for touch events, and then prevent their default action

if (is_iOS) {
    document.querySelector('.some-element').addEventListener('touchstart touchmove touchend', function (e) {
        e.preventDefault();
    });
}

I haven't tested the above code, but in theory it should work