Как сделать кликабельные ссылки внутри 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.

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

Как копировать или клонировать объект в javascript?

Декабрь 10, 2016 г.

В чистом виде js не даёт такой возможности. То как вы будет создавать копии ваших объектов - зависит от вас. [crayon-68deefa6ea2a0448748467/] т.к. А и B ссылаются на один и тот же объект. Классика Если идти классическим путем, то мы должны запрограммировать ...

Читать

Обработка событий загрузки изображения

Май 16, 2025 г.

В веб-разработке важно уметь правильно обрабатывать процесс загрузки изображений. Браузеру может потребоваться время на подгрузку файла, особенно при медленном соединении или больших изображениях. Задача разработчика — отслеживать статус загрузки изображения ...

Читать

Преодоление кросс-доменности в iframe

Январь 14, 2018 г.

Дочерние документы не могут самостоятельно читать данные из родительского фрейма,  если тот находится на другом домене. Возможны исключения для под-доменов одного и того же доменного имени. Все это связано с мерами безопасности и т.п. чепухи. :). Для ...

Читать

Как в javascript получить реальные размеры картинки (тег img)

Сентябрь 17, 2018 г.

Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки. Разберемся как получать реальные размеры изображения. В общем, нет особых хитростей. ...

Читать
 

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

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



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