【问题标题】:Turbolinks/Fastclick - Touch event 'passes through' to the next page when using the transition cacheTurbolinks/Fastclick - 使用过渡缓存时,触摸事件“通过”到下一页
【发布时间】:2016-03-26 09:38:18
【问题描述】:

我在 iOS 上使用 Turbolinks 3.0 和 Fastclick 来消除 300 毫秒的 iOS 延迟,并启用转换缓存。这为移动设备上的 Rails 提供了非常棒/即时的体验。

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

事件实际上会传递到同一个地方的任何东西(如果我点击一个链接并且表单输入在下一页加载的同一个地方,它将专注于输入)。

我实际上可以用手指“更快地点击”以防止它发生。只有当水龙头更慢(持续时间更长)时才会发生。

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

【问题讨论】:

    标签: ruby-on-rails ruby-on-rails-4 turbolinks fastclick.js


    【解决方案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)。

    我现在将尝试更深入地研究并尝试捕捉幽灵点击事件并防止它发生,而不是使用整个 div 来操作 DOM。如果有人对如何做到这一点有任何见解,我很想听听。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-09-14
      • 1970-01-01
      • 2013-10-10
      • 2017-03-27
      • 2013-07-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多