Автоматический перехват кликов

Библиотека Page.js предоставляет возможность автоматического перехвата кликов по ссылкам внутри приложения для реализации клиентского роутинга без перезагрузки страницы. Этот механизм позволяет превратить обычные <a> элементы в точки навигации, управляемые JavaScript, что особенно полезно для одностраничных приложений (SPA).

Автоматический перехват кликов осуществляется с помощью метода:

page();

или более явного включения:

page({ click: true });

По умолчанию Page.js слушает все события click на документе и проверяет, соответствует ли элемент <a> правилам маршрутизации. Если соответствие найдено, библиотека предотвращает стандартное поведение браузера (event.preventDefault()) и инициирует переход через внутреннюю систему маршрутов.

Условия перехвата

Автоматический перехват не срабатывает, если выполняется хотя бы одно из условий:

  1. Модификаторы клавиш: Ctrl, Shift, Meta или Alt нажаты во время клика. Это позволяет пользователю открывать ссылки в новой вкладке или окне.
  2. Атрибут target: если у ссылки задан target="_blank" или другой target, Page.js не перехватывает клик.
  3. Ссылки с внешним URL: любые ссылки, ведущие на другой домен, не обрабатываются библиотекой.
  4. Ссылки с явным классом исключения: можно вручную добавить проверку на определённый CSS-класс для исключения перехвата.
  5. Пользовательская обработка события: если клик уже был обработан другим слушателем, перехват не выполняется.

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

Настройка перехвата кликов

Можно контролировать автоматический перехват с помощью опций:

page({
  click: true, // включает перехват кликов
  popstate: true // включает обработку истории браузера
});

Для отключения перехвата кликов достаточно указать:

page({ click: false });

Также можно добавлять собственную логику фильтрации ссылок через функцию page.click:

page.click = function(event) {
  const el = event.target.closest('a');
  if (!el) return false;
  if (el.classList.contains('no-pagejs')) return false;
  return true;
};

Делегирование кликов

Page.js использует делегирование событий, привязывая обработчик к document. Это означает, что динамически добавленные ссылки также автоматически становятся управляемыми маршрутизатором. Делегирование обеспечивает:

  • Высокую производительность при большом количестве ссылок.
  • Автоматическую работу с элементами, добавленными после инициализации Page.js.
  • Минимальное вмешательство в HTML-разметку.

Обработка ссылок с параметрами и хешами

Page.js корректно обрабатывает клики по ссылкам с:

  • Параметрами запроса (?query=123)
  • Хешами (#section1)
  • Комбинацией обоих (?query=123#section1)

Маршруты в Page.js можно настроить так, чтобы игнорировать хеш или использовать его для навигации внутри страницы. Например:

page('/posts/:id', (ctx) => {
  console.log('ID поста:', ctx.params.id);
});

Если ссылка ведет на /posts/42#comments, параметр id будет корректно равен 42.

Взаимодействие с историей браузера

Автоматический перехват кликов интегрируется с HTML5 History API. При клике:

  1. event.preventDefault() блокирует стандартную навигацию.
  2. history.pushState() добавляет новый элемент в историю.
  3. Вызывается соответствующий маршрут Page.js.

Это позволяет пользователю использовать кнопки “Назад” и “Вперед” браузера без потери состояния приложения.

Исключение определённых ссылок

Для сложных случаев можно вручную отключать перехват для отдельных ссылок:

<a href="/admin" oncl ick="return false;">Админка</a>

Или через CSS-класс:

<a href="/login" class="no-pagejs">Войти</a>

И настройка Page.js:

page.click = function(event) {
  const el = event.target.closest('a');
  return el && !el.classList.contains('no-pagejs');
};

Резюме ключевых моментов

  • Автоматический перехват кликов делает ссылки внутри SPA управляемыми Page.js без перезагрузки.
  • Перехват происходит через делегирование событий на document.
  • Игнорируются клики с модификаторами клавиш, ссылки на внешние ресурсы и ссылки с target, отличным от _self.
  • Поддерживается работа с параметрами, хешами и историей браузера.
  • Механизм легко настраивается через опции click и кастомные функции фильтрации.

Эти возможности позволяют создавать плавную навигацию внутри SPA, сохраняя привычное поведение браузера и гибко управляя ссылками.

Оглавление