Полимер: обработчики тапов и открытие в новой вкладке

Обработчики касаний Polymer устраняют всю сложность обработки касаний и кликов в мобильных веб-браузерах, также известную как проклятие задержки в 300 мс.

Вот пример, когда нажатие на ‹div› перемещает приложение в #list, что загрузит представление списка:

<div on-tap="goToList">Go to list</div>
...
goToList: function(e) {
  // Do some magic
  // ...

  window.location.href = '#list';
}

К сожалению, пользовательский опыт на рабочем столе не так уж удивителен. В частности, пользователи не могут просто щелкнуть элемент правой кнопкой мыши, чтобы открыть цель на другой вкладке.

Это можно легко решить, обернув элемент в якорный элемент:

<a href="#list" on-tap="goToList"><div>Go to list</div></a>
...
goToList: function(e) {
  // Do some magic
  // ...

  window.location.href = '#list';
}

Однако есть одна загвоздка: если вы щелкнете по якорю, браузер выполнит обработчик касания и, кроме того, активирует поведение по умолчанию для щелчка по якорю.

Чтобы предотвратить эти двойные выполнения, обработчик крана должен немедленно предотвратить обработку события по умолчанию:

<a href="#list" on-tap="goToList"><div>Go to list</div></a>
...
goToList: function(e) {
  e.preventDefault();

  // Do some magic
  // ...

  window.location.href = '#list';
}

Удачного кодирования!

Хотите узнать больше о Polymer? Посмотрите все наши Публикации на Medium о Polymer.

Фото: Крис Кардью