Ссылки с модификаторами клавиш

Page.js предоставляет возможность управлять маршрутизацией в одностраничных приложениях (SPA) на основе URL, при этом поведение ссылок может быть гибко настроено с учётом нажатий клавиш-модификаторов. Это важно для сохранения стандартного поведения браузера, например открытия ссылок в новой вкладке или копирования адреса.

Основы обработки событий ссылок

Page.js перехватывает события клика на <a> элементах и вызывает соответствующий маршрут. По умолчанию библиотека предотвращает стандартное действие браузера:

page('/about', () => {
  console.log('Страница About');
});

page();

В данном примере любой клик по ссылке на /about не приведёт к перезагрузке страницы, а вызовет колбэк маршрута. Однако иногда требуется сохранить стандартное поведение браузера при использовании модификаторов клавиш.

Модификаторы клавиш

Модификаторы включают:

  • Ctrl (или Cmd на macOS)
  • Shift
  • Alt
  • Meta (обычно совпадает с Cmd на macOS)

Page.js автоматически проверяет эти клавиши при клике. Если какая-либо из них зажата, библиотека не предотвращает стандартное действие. Это позволяет пользователю:

  • Открыть ссылку в новой вкладке (Ctrl + клик)
  • Открыть ссылку в новом окне (Shift + клик)
  • Скопировать адрес ссылки (Right-click + Copy link)
document.addEventListener('click', function(e) {
  console.log('ctrlKey:', e.ctrlKey, 'shiftKey:', e.shiftKey, 'altKey:', e.altKey, 'metaKey:', e.metaKey);
});

Page.js использует аналогичную проверку внутри своей функции clickHandler:

function clickHandler(e) {
  if (e.defaultPrevented) return;
  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; // сохраняем стандартное поведение
  e.preventDefault();
  page.show(e.currentTarget.pathname);
}

Настройка поведения при модификаторах

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

function customClickHandler(e) {
  const link = e.currentTarget;

  // Всегда обрабатывать маршрут, даже если зажаты модификаторы
  e.preventDefault();
  page.show(link.pathname);
}

document.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', customClickHandler);
});

Такой подход полезен для ссылок внутри SPA, где нужно строго контролировать переходы, например при динамической подгрузке контента через AJAX.

Примеры комбинаций

  1. Ctrl + клик (Cmd + клик на Mac) – открытие в новой вкладке. Page.js по умолчанию пропускает событие.
  2. Shift + клик – открытие в новом окне. Событие не перехватывается.
  3. Alt + клик – поведение зависит от браузера, чаще используется для скачивания ресурса.
  4. Meta + клик – аналог Ctrl + клик на Mac, открытие в новой вкладке.

Особенности работы с target="_blank"

Page.js также учитывает атрибут target="_blank":

<a href="/contact" target="_blank">Контакты</a>

При таком клике событие не перехватывается библиотекой, вне зависимости от модификаторов. Это предотвращает неожиданное поведение и сохраняет привычный UX.

Проверка всех условий

Полный пример проверки клика с учётом модификаторов и target:

document.addEventListener('click', function(e) {
  const el = e.target.closest('a');
  if (!el) return;

  // Игнорируем внешние ссылки
  if (el.host !== location.host) return;

  // Игнорируем клики с модификаторами или target="_blank"
  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || el.target === '_blank') return;

  e.preventDefault();
  page.show(el.pathname);
});

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

Итоговые рекомендации

  • Всегда проверять metaKey, ctrlKey, shiftKey и altKey перед вызовом preventDefault().
  • Использовать target="_blank" для внешних ссылок.
  • При необходимости полного контроля над маршрутами создавать кастомные обработчики клика.
  • Совмещать стандартное поведение и SPA-переходы для лучшего UX.

Эти принципы обеспечивают правильное управление ссылками с модификаторами и предотвращают конфликт с привычной навигацией браузера.

Оглавление