8

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.

Shanmugaraja_K
  • 1,914
  • 3
  • 13
  • 25

2 Answers2

6

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

Denno
  • 2,020
  • 3
  • 19
  • 27
  • 1
    Is it possible to do in CSS. – Shanmugaraja_K Apr 09 '18 at 05:15
  • 1
    @Raja You won't be able to implement it using CSS alone – Denno Apr 10 '18 at 05:30
  • @Denno See the other answer for a CSS solution... not appropriate for all use cases, but possible depending on specifically what you're trying to do. – Brad Dec 04 '20 at 22:47
  • @brad CSS solution provided also disabled a bunch of other events, which I was avoiding, and my answer is still correct in that context. It cannot be done with CSS alone. – Denno Dec 06 '20 at 07:02
  • @Denno I agree with you, that's why I upvoted both answers. I'm just saying, the CSS solution is valid in many situations. – Brad Dec 06 '20 at 07:12
6

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 .

Chirag Ravindra
  • 4,760
  • 1
  • 24
  • 35