Famo.us “Fastclick” 在移动设备上点击两次

Posted 2023-03-14

【中文标题】Famo.us “Fastclick” 在移动设备上点击两次

【英文标题】：Famo.us 'Fastclick' firing two clicks on mobile

【发布时间】：2014-06-03 16:40:56

【问题描述】：

我正在使用 Famo.us 的 Fastclick，要求它位于我的一个主要视图的顶部，如下所示：

 var FastClick = require('famous/inputs/FastClick');

在 ios7 Safari 和 Chrome 中，Fastclick 可以消除 300 毫秒的延迟，但是当我单击从 DOM 中移除“覆盖”表面的表面（例如后退按钮）时，两个表面——被移除的表面和新表面——接收点击事件。因此，例如，如果我单击覆盖表面上的后退按钮，并且在其下方的表面上有一个后退按钮，则两个后退按钮都会触发并移除两个表面。

当我删除 FastClick 后，问题解决了，但 300ms 延迟又回来了。

我已在桌面上检查过该问题，但即使存在 FastClick，它也没有发生。我还控制台记录了点击事件，它们只触发一次。这表明，在移动设备上，问题是由于从 DOM 中移除“覆盖”表面后我的手指仍然在玻璃上。

关于如何解决的任何想法？

【参考方案1】：

想出了如何防止这种情况发生。

this.buttonSurface.on('click', function(e)
    if(e.detail != null) return false;
.bind(this));

【参考方案2】：

我在一个菜单按钮上遇到了这个确切的问题，当单击它时会带来一个画布外菜单，该菜单在第一个菜单按钮所在的位置有一个按钮。这两个项目都会在 iOS 上收到点击或“点击”，但在 android 上不会收到（在任何桌面浏览器中都不会）。浪费了几个小时试图让 Famo.us 快速点击工作，因为正如你所说，当你禁用它时，菜单按预期工作，但你最终会出现 300 毫秒的延迟。

我最终使用了原始的 fastclick。 在我的 bower.json 中：

"dependencies": 
    "requirejs": "~2.1.11",
    "almond": "~0.2.9",
    "famous-polyfills": "git+https://github.com/Famous/polyfills.git#0.1.1",
    "famous": "~0.2.1",
    "fastclick": "1.0.2"
  

在我的主应用文件中：

var FastClick     = require('fastclick');

...在初始化期间：

FastClick.attach(document.body);