Всплытие событий

Snap.svg предоставляет мощный и гибкий механизм работы с событиями на SVG-элементах, который позволяет реагировать на действия пользователя: клики, наведение, перетаскивание и другие взаимодействия. Работа с событиями осуществляется через методы click, hover, mousedown, mouseup, mousemove, mouseout, mouseover и универсальный метод drag.

Все обработчики событий принимают функцию обратного вызова, которая выполняется при наступлении события. Функции обратного вызова получают объект события event, содержащий всю информацию о взаимодействии пользователя.

var s = Snap("#svg");
var circle = s.circle(100, 100, 50);

circle.click(function(event) {
    console.log("Клик по кругу", event);
});

В примере выше метод click регистрирует обработчик клика по кругу. При клике на элемент в консоль выводится объект события.

Метод hover

Метод hover позволяет регистрировать два обработчика: для наведения курсора (mouseover) и для ухода курсора (mouseout). Синтаксис:

element.hover(f_in, f_out);
  • f_in – функция, вызываемая при наведении.
  • f_out – функция, вызываемая при уходе курсора.

Пример:

circle.hover(
    function() { this.attr({fill: "red"}); },
    function() { this.attr({fill: "blue"}); }
);

При наведении на круг его цвет меняется на красный, при уходе курсора – возвращается синий.

События мыши и их обработка

Snap.svg поддерживает стандартные события мыши:

  • mousedown – нажатие кнопки мыши
  • mouseup – отпускание кнопки мыши
  • mousemove – движение мыши над элементом
  • mouseover – наведение курсора на элемент
  • mouseout – уход курсора с элемента
circle.mousemove(function(event) {
    console.log("Координаты мыши:", event.clientX, event.clientY);
});

В этом примере выводятся координаты мыши при движении над кругом.

События касания (Touch Events)

Snap.svg поддерживает мобильные устройства через события касания:

  • touchstart – начало касания
  • touchmove – движение пальца
  • touchend – окончание касания

События касания обрабатываются аналогично событиям мыши:

circle.touchstart(function(event) {
    console.log("Начало касания", event.touches[0].clientX, event.touches[0].clientY);
});

Универсальный метод drag

Метод drag позволяет реализовать перетаскивание элементов. Он принимает три функции:

element.drag(onmove, onstart, onend);
  • onmove(dx, dy, x, y, event) – вызывается при движении, dx и dy – смещение относительно начальной точки.
  • onstart(x, y, event) – вызывается при начале перетаскивания.
  • onend(event) – вызывается при окончании перетаскивания.

Пример перетаскивания круга:

circle.drag(
    function(dx, dy) {
        this.attr({cx: this.data('startX') + dx, cy: this.data('startY') + dy});
    },
    function() {
        this.data('startX', this.attr('cx'));
        this.data('startY', this.attr('cy'));
    },
    function() {
        console.log("Перетаскивание завершено");
    }
);

Делегирование и комбинирование событий

Snap.svg позволяет комбинировать обработчики событий для одного элемента и использовать делегирование через родительские группы <g>:

var group = s.group(circle, s.rect(50,50,100,100));
group.click(function() {
    console.log("Клик по группе элементов");
});

Любое событие на дочерних элементах также может быть перехвачено на уровне группы. Это упрощает управление большим количеством элементов и позволяет централизованно обрабатывать взаимодействия.

Отмена и отключение событий

Для удаления обработчиков используется метод unhover для наведения и стандартный unclick:

circle.unclick();
circle.unhover();

При необходимости можно полностью очистить все события через element.events или вручную управлять массивом обработчиков.

Практические рекомендации

  • Для сложных интерактивных анимаций лучше использовать комбинацию событий hover и drag.
  • События должны быть лёгкими и быстрыми, так как обработчики вызываются часто.
  • Для мобильных устройств необходимо учитывать и мышь, и касания, чтобы интерфейс был универсальным.
  • Использование групп <g> для делегирования событий уменьшает количество повторяющегося кода.

Особенности работы с координатами

События Snap.svg возвращают координаты в глобальной системе SVG (event.clientX/Y) и относительно элемента (getBBox()). При анимации и трансформациях важно правильно пересчитывать координаты, чтобы интерактивность оставалась точной:

var bbox = circle.getBBox();
circle.click(function(event) {
    var relativeX = event.clientX - bbox.x;
    var relativeY = event.clientY - bbox.y;
    console.log(relativeX, relativeY);
});

Использование этих методов позволяет создавать точные и отзывчивые интерфейсы с динамическими элементами SVG.

Оглавление