Обработчики событий мыши

Snap.svg предоставляет удобный и интуитивно понятный способ работы с интерактивными элементами SVG через обработчики событий мыши. Для каждого элемента можно назначить реакции на события click, mouseover, mouseout, mousedown, mouseup, mousemove и другие.

var s = Snap("#svg"); // создаём канвас SVG
var circle = s.circle(100, 100, 50); // создаём круг
circle.attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 3
});

// Обработчик клика
circle.click(function() {
    this.attr({ fill: "#e74c3c" });
});

В данном примере при клике на круг его цвет изменяется на красный. this внутри функции ссылается на сам элемент Snap.svg.

Основные события мыши

1. click – срабатывает при нажатии и отпускании кнопки мыши на элементе. 2. dblclick – срабатывает при двойном клике. 3. mouseover / mouseout – срабатывают при наведении курсора на элемент и при уходе курсора с элемента соответственно. 4. mousedown / mouseup – фиксируют момент нажатия и отпускания кнопки мыши. 5. mousemove – отслеживает движение мыши над элементом.

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

circle.hover(
    function() { this.attr({ fill: "#2ecc71" }); },
    function() { this.attr({ fill: "#3498db" }); }
);

Метод hover является удобным сокращением для назначения одновременно mouseover и mouseout.

Передача данных в обработчики

Можно использовать замыкания для передачи дополнительных параметров в функции обработчиков.

function changeColor(color) {
    return function() {
        this.attr({ fill: color });
    }
}

circle.click(changeColor("#f1c40f"));

Такой подход позволяет повторно использовать одну и ту же логику для разных элементов с разными параметрами.

Снятие обработчиков событий

Snap.svg поддерживает удаление обработчиков с помощью метода unhover и unclick для соответствующих событий.

circle.unclick(); // убирает обработчик click
circle.unhover(); // убирает hover (mouseover + mouseout)

Для более сложных событий можно использовать метод element.node.removeEventListener, если нужен полный контроль.

События на группе элементов

Snap.svg позволяет объединять элементы в группы через g(). Обработчики можно назначать как на отдельные элементы, так и на всю группу целиком.

var group = s.group(circle, s.rect(50, 50, 100, 50));
group.click(function() {
    this.attr({ opacity: 0.5 });
});

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

Контекст события и координаты

Объект события доступен в обработчиках через аргумент функции. Он содержит стандартные свойства JavaScript-событий:

circle.click(function(event) {
    console.log("Координаты клика:", event.clientX, event.clientY);
});

Snap.svg автоматически передаёт DOM-событие, что позволяет использовать свойства clientX, clientY, target и другие для точного контроля над взаимодействием пользователя.

Комбинация анимаций и событий

Эффекты мыши можно сочетать с анимациями Snap.svg, создавая плавные интерактивные переходы.

circle.hover(
    function() { this.animate({ r: 70 }, 300, mina.easeinout); },
    function() { this.animate({ r: 50 }, 300, mina.easeinout); }
);

В этом примере радиус круга плавно увеличивается при наведении и возвращается при уходе мыши.

Применение событий к множеству элементов

Для работы с набором элементов можно использовать метод forEach, назначая обработчики каждому элементу коллекции.

var circles = [s.circle(50, 50, 30), s.circle(150, 50, 30), s.circle(250, 50, 30)];
circles.forEach(function(c, i) {
    c.attr({ fill: "#9b59b6" });
    c.click(function() {
        this.attr({ fill: "#f39c12" });
    });
});

Такой подход позволяет эффективно управлять интерактивными элементами без дублирования кода.

Совместимость с touch-событиями

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

circle.node.addEventListener("touchstart", function(e) {
    this.setAttribute("fill", "#1abc9c");
});

Таким образом, элементы остаются интерактивными на мобильных устройствах.

Итоговые рекомендации по обработчикам

  • Использовать методы click, hover, mousedown, mouseup для простых интеракций.
  • Применять замыкания для передачи дополнительных параметров.
  • Для групп элементов назначать обработчики на группу, если требуется общая реакция.
  • Комбинировать анимации с событиями для плавного визуального отклика.
  • Для мобильных устройств подключать стандартные touch-события через addEventListener.

Эта система событий в Snap.svg позволяет создавать динамичные и отзывчивые SVG-интерфейсы без сложных внешних библиотек.

Оглавление