如何在iOS中的单个HTML元素上禁用触摸操作

Question

由于某种原因，我需要对html元素禁用触摸操作。我对CSS属性touch-action感到厌倦：none。但是它不适用于Safari和iOS设备。有什么方法可以禁用iOS上html元素的触摸操作。

Answer 1

虽然不建议这样做，但您可以使用用户代理嗅探来确定用户是否在 iOS 设备上

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

然后，在 if 条件中使用它，创建一个事件侦听器来侦听触摸事件，然后阻止它们的默认操作

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

我还没有测试过上面的代码，但理论上它应该可以工作

Answer 2

如果您不介意点击事件和其他指针事件也被停止，您可以尝试pointer-events:none;在您的 CSS 中。如果您希望这特定于移动设备，您可以使用媒体查询来应用它。如果您只希望在 iOS 上使用它，您可以在 JS 中进行用户代理嗅探 [如@Denno's Answer 中所做的那样] 并将具有该样式的类应用于您的元素。