Turbolinks/Fastclick — событие касания «переходит» на следующую страницу при использовании кеша переходов

Я использую Turbolinks 3.0 на iOS с Fastclick, чтобы убрать задержку iOS в 300 мс с включенным кэшем перехода. Это обеспечивает действительно отличный/мгновенный опыт работы с Rails на мобильных устройствах.

У меня есть ссылка на обеих страницах в одном и том же месте, и когда я нажимаю ссылку на одной странице, fastclick+turbolinks мгновенно загружает следующую страницу, но событие переходит на следующую страницу, и ссылка на этой странице тоже нажимается, запуск обеих ссылок и переход по страницам дважды.

Событие фактически будет передано всему, что находится в одном и том же месте (если я нажму на ссылку, а ввод формы будет в том же месте на следующей загруженной странице, он сосредоточится на вводе).

На самом деле я могу сделать «быстрое касание» пальцем, чтобы этого не произошло. Это происходит только тогда, когда кран более вялый (он длится дольше).

Любая помощь или понимание будет принята с благодарностью!


person Greg Blass    schedule 19.12.2015    source источник


Ответы (1)


После тонны удручающей отладки и размышлений за последние несколько дней это решение, похоже, работает (но очень хакерское):

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).

Теперь я попытаюсь погрузиться глубже и попытаться поймать событие призрачного щелчка и предотвратить его появление вместо того, чтобы манипулировать DOM с помощью целого div. Если у кого-нибудь есть понимание, как это сделать, я хотел бы услышать.

person Greg Blass    schedule 21.12.2015