Safari iOS：使用单击处理程序拖动元素有时会触发元素外的单击

Question

我在 ios/safari 上遇到问题，有时会错误触发点击。

此链接在 react 和常规 html 中呈现一个按钮： https://jsbin.com/bavesepido/edit?html,css,js,output

您只需要以下 CSS 规则以及一个 html 按钮：

CSS

  * {
    outline: 0;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

HTML

<button onclick="alert('click')">click me</button>

在您的 iOS 设备上，您可以按如下方式重现它：

1. 用手指按下按钮，但不要松开
2. 将手指慢慢移出按钮边界
3. 松开手指。

通常情况下，您会收到提示点击发生的警报。

有谁知道我可以如何防止这种情况发生？这给我带来了很多问题。

你可以在这个视频中看到我这样做：https://www.youtube.com/watch?v=FlV0LaREYn8&feature=youtu.be

提前致谢。

Answer 1

尝试使用 onClick 将touch-action="none" 添加到元素中。