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

Posted 2023-03-11

【中文标题】如何在 iOS 中禁用单个 HTML 元素的触摸操作

【英文标题】：How to disable touch action for on single HTML Element in iOS

【发布时间】：2018-04-09 05:03:20

【问题描述】：

出于某种原因，我需要禁用对 html 元素的触摸操作。我已经厌倦了 CSS 属性 touch-action: none。但它不适用于 Safari 和 ios 设备。有什么方法可以在 iOS 上禁用 html 元素的触摸操作。

【参考方案1】：

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

【参考方案2】：

虽然不推荐，但您可以使用用户代理嗅探来确定用户是否在 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();
    );

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

【讨论】：

是否可以在 CSS 中实现。

@Raja 你将无法单独使用 CSS 来实现它

@Denno 查看 CSS 解决方案的其他答案...并不适用于所有用例，但具体取决于您要执行的操作。

@brad CSS 提供的解决方案还禁用了我正在避免的其他一些事件，在这种情况下我的答案仍然是正确的。仅靠 CSS 是无法做到的。

@Denno 我同意你的观点，这就是为什么我赞成这两个答案。我只是说，CSS 解决方案在很多情况下都有效。