Когда вы используете Fancybox для отображения изображений, SVG и других медиа-объектов, возникает интересная проблема: если внутри SVG находятся ссылки (<a>), они перестают работать. Почему? Потому что Fancybox «перехватывает» клик, и вы не попадаете на нужный href.
Вот простое решение этой задачи.
Описание проблемы
Допустим, у нас есть SVG с интерактивными областями:
|
1 2 3 4 5 6 7 |
<a data-fancybox href="example.svg"> <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="https://example.com"> <text x="10" y="20">Перейти</text> </a> </svg> </a> |
При клике на этот текст откроется Fancybox, а не https://example.com.
Решение
Мы будем перехватывать клики до того, как Fancybox обработает их. Если клик был по <a> внутри <svg>, мы останавливаем всплытие события:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(function($) { $("[data-fancybox]").on('click', (e) => { // Проверяем, был ли клик по ссылке внутри SVG const svgLink = e.target.closest('svg a'); if (svgLink) { // Не даём Fancybox обработать клик e.stopImmediatePropagation(); return; } }); // Подключаем Fancybox Fancybox.bind("[data-fancybox]", { ... }); })(jQuery); |
Как это работает?
- Мы вешаем обработчик
clickна элементы сdata-fancyboxдо инициализации самого Fancybox. - Если клик произошёл по ссылке внутри SVG, то
closest('svg a')вернёт нужный элемент. - С помощью
stopImmediatePropagation()мы предотвращаем запуск обработчиков Fancybox, и браузер спокойно перейдёт по ссылке. - Во всех остальных случаях Fancybox работает как обычно.
Бонус: проверка на мобильных
Если вы замечаете, что это не срабатывает на тач-устройствах — можно дублировать обработку на touchstart.
