Question

我有一个带有按钮的主页，该按钮打开一个覆盖项，其中包含由多个按钮（例如，一个带电话号码的按钮）组成的项目详细信息。

我的问题是，当用户不小心双击主页按钮时，第一次单击将在主页上得到纠正，但是第二次单击可能指向带有电话号码的按钮，该电话号码是从第一次打开的覆盖中打开的点击。因此，尽管他/她只想打开覆盖图，但该用户会立即转到手机App。

Safari可以解决此问题，但Chrome中存在此问题。

我想到的唯一解决方案是对叠加层上的所有按钮设置setTimeout。有没有更好的方法来处理此类问题？

P.S。无法移动叠加按钮，因此其位置与主页按钮不一样。

Answer 1

您可以使用ondblclick（https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondblclick）返回false，但这似乎更像是UX问题，您的按钮完全位于同一位置。尽管如果用户设法连续单击两个按钮，则可能无法正确地双击它，因此第一个解决方案可能无法正常工作。

我真的建议将第二个按钮移动到模态中的另一个位置或移动模态本身。

Answer 2

必须超时处理

//onOverlayOpen
this.overlay.classList.add('overlay--blocked');
setTimeout(() => {
    this.overlay.classList.remove('overlay--blocked');
}, 350);

//CSS
.overlay--blocked {
    pointer-events: none;
}

防止意外双击移动设备

2 个答案: