Как сделать кликабельные ссылки внутри SVG при использовании Fancybox

Когда вы используете Fancybox для отображения изображений, SVG и других медиа-объектов, возникает интересная проблема: если внутри SVG находятся ссылки (<a>), они перестают работать. Почему? Потому что Fancybox «перехватывает» клик, и вы не попадаете на нужный href.

Вот простое решение этой задачи.

Описание проблемы

Допустим, у нас есть SVG с интерактивными областями:

При клике на этот текст откроется Fancybox, а не https://example.com.

Решение

Мы будем перехватывать клики до того, как Fancybox обработает их. Если клик был по <a> внутри <svg>, мы останавливаем всплытие события:

Как это работает?

  • Мы вешаем обработчик click на элементы с data-fancybox до инициализации самого Fancybox.
  • Если клик произошёл по ссылке внутри SVG, то closest('svg a') вернёт нужный элемент.
  • С помощью stopImmediatePropagation() мы предотвращаем запуск обработчиков Fancybox, и браузер спокойно перейдёт по ссылке.
  • Во всех остальных случаях Fancybox работает как обычно.

Бонус: проверка на мобильных

Если вы замечаете, что это не срабатывает на тач-устройствах — можно дублировать обработку на touchstart.

Мало букафф? Читайте есчо !

CKE5 функция создания контейнера-обертки в модели

Март 20, 2025 г.

Делюсь примером кода, для создания обертки в модели экосистемы CKEditor 5. Здесь есть несколько нюансов. Во-первых, нужно проверить, являются ли оборачиваемые элементы валидными по отношению к обертке, в которую мы их помещаем. У CKE элементов ...

Читать

Ошибка в Drupal: once is not a function

Май 8, 2023 г.

В Drupal 9/10 нет jQuery плагина once(), потому при использовании этой функции вы увидите сообщение о том, что once - не является функцией. Плагин удобен, но его не сложно заменить в коде буквально парой вставок. Он работает по следующему алгоритму ...

Читать

Как получить значение из mui TextField

Июнь 18, 2023 г.

React компонент TextField библиотеки @mui/material - это сложный элемент и получить значение через свойство ref нельзя. Разработчики понимали, что доступ к HTMLInputElement внутри компонента нужно предоставить, и потому реализовали свойство inputRef, ...

Читать

Найти элемент по его классу в HTML на чистом js

Май 4, 2020 г.

Немного ванильного js, на этот раз: как найти контейнер по указанному классу. Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent. В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...

Читать
 

Комментарии к «Как сделать кликабельные ссылки внутри SVG при использовании Fancybox»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: