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

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

Вывод в swiper.js слайдере кастомных булетов

Ноябрь 22, 2019 г.

Специально для Артура, задающего вопрос в статье про swiper, привожу пример как вывести в swiper.js вместо штатных булетов навигации некие кастомные текстовые метки. Swiper.js позволяет глубоко кастомизировать все свои элементы. Достаточно обратиться ...

Читать

Создание контейнера DIV средствами чистого js

Август 5, 2018 г.

Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js. Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...

Читать

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

Июнь 18, 2023 г.

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

Читать

Обработка события click или touchstart

Октябрь 31, 2018 г.

Широкое применение мобильных устройств для доступа в интернет накладывает свои специфические требования на разработку веб-сайтов. Привычный обработчик onclick может срабатывать совместно с ontouchstart, а может не срабатывать вовсе на мобильном устройстве. ...

Читать
 

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

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



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