Turbolinks/Fastclick - 使用过渡缓存时触摸事件 'passes through' 到下一页

Question

我在 iOS 上使用 Turbolinks 3.0 并通过 Fastclick 移除 300 毫秒 iOS 延迟，并启用了过渡缓存。这在移动设备上 Rails 提供了真正的 great/instant 体验。

我在两个页面的同一个地方都有一个 link，当我在一个页面上按下 link 时，fastclick+turbolinks 会立即加载下一页 -但是事件传递到下一页并且该页面上的 link 也被点击，触发 links 和导航页面两次。

该事件实际上会传递到同一位置的任何内容（如果我单击 link 并且表单输入在下一页加载的同一位置，它将专注于输入） .

我实际上可以用手指做一个 'faster tap' 来防止它发生。只有当敲击更缓慢（持续时间更长）时才会发生。

任何帮助或见解将不胜感激！

Answer 1

在过去几天进行了大量令人沮丧的调试和思考之后，这个解决方案似乎可行（但非常 hack-ish）：

JS:

$(document).on("page:restore", function() {
  $("body").prepend("<div id='ghost-blocker' onclick='return false;'></div>");
  setTimeout(function() {
   $("#ghost-blocker").remove();
  }, 300);
});

CSS:

#ghost-blocker {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}

我基本上调试了所有带有警报的回调，发现在从缓存加载页面之后但在触发幽灵点击之前发生的最后一件事是 page:restore 函数。我制作了一个覆盖整个屏幕并取消所有点击事件的拦截器 div，然后在 300 毫秒后将其删除。这完成了工作，尽管很草率。 page:restore 回调也是以您需要的任何其他方式重置页面的好时机，例如重置遗留的加载程序图像（我正在使用 ladda）。

我现在要尝试 dive 更深入地尝试捕捉幽灵点击事件并防止它发生，而不是用整个 div 来操纵 DOM .如果有人对如何执行此操作有任何见解，我很乐意听到。

Turbolinks/Fastclick - 使用过渡缓存时触摸事件 'passes through' 到下一页

Turbolinks/Fastclick - Touch event 'passes through' to the next page when using the transition cache

ruby-on-rails

ruby-on-rails-4

turbolinks

fastclick.js