CODEWITHSUNDEEP
javascriptiosiphonecss
Shanmugaraja_K
Shanmugaraja_K

Reputation: 2382

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

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.

Upvotes: 9

Views: 19347

Answers (2)

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

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 .

Upvotes: 7

Denno
Denno

Reputation: 2168

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

Upvotes: 6

Related Questions