javascript - 苹果浏览器 : drag on element with click handler sometimes triggers click outside of element

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

尝试将 touch-action="none" 添加到带有 onClick 的元素。