Подписка на события мыши

Библиотека SVG.js предоставляет удобные методы для работы с векторной графикой на веб-странице, включая поддержку событий мыши. Любой SVG-элемент, созданный через SVG.js, может отслеживать события click, mousemove, mouseenter, mouseleave и другие, что делает интерактивные интерфейсы простыми в реализации.

Подписка на событие click

Метод on() позволяет назначить обработчик события на конкретный SVG-элемент:

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(100, 100).fill('#f06');

rect.on('click', function(event) {
    console.log('Клик по прямоугольнику', event);
});

Особенности:

  • Аргументом метода on() является тип события ('click', 'mousemove', 'mouseenter' и т.д.).
  • В обработчик передается объект события event, содержащий координаты курсора, целевой элемент и дополнительные свойства.
  • Поддерживаются стрелочные функции, что удобно для сохранения контекста:
rect.on('click', (event) => {
    this.fill({ color: '#0f6' }); // 'this' ссылается на элемент в обычной функции, но в стрелочной контекст будет внешним
});

События наведения: mouseenter и mouseleave

SVG.js позволяет легко реализовать эффекты при наведении курсора:

rect.on('mouseenter', function() {
    this.fill({ color: '#0f6' });
});

rect.on('mouseleave', function() {
    this.fill({ color: '#f06' });
});

Ключевые моменты:

  • mouseenter срабатывает один раз при входе курсора в границы элемента.
  • mouseleave срабатывает при выходе курсора за пределы элемента.
  • Можно комбинировать несколько событий для сложных эффектов, например, анимации изменения цвета или масштаба.

Отслеживание движения мыши: mousemove

Событие mousemove позволяет реагировать на движение курсора относительно элемента:

rect.on('mousemove', function(event) {
    const { offsetX, offsetY } = event;
    console.log(`Координаты мыши: X=${offsetX}, Y=${offsetY}`);
});

Особенности:

  • offsetX и offsetY дают координаты курсора относительно элемента.
  • Для глобальных координат можно использовать clientX и clientY.
  • Часто используют совместно с анимацией или динамическим изменением свойств элемента.

Отмена подписки: off()

Метод off() позволяет удалять обработчики событий, что важно для управления ресурсами и предотвращения утечек памяти:

function handleClick(event) {
    console.log('Обработчик сработал');
}

rect.on('click', handleClick);

// Удаление обработчика
rect.off('click', handleClick);

Особенности:

  • Если не указать функцию, метод off() удаляет все обработчики указанного типа.
  • Можно удалять события только для конкретного элемента или для группы элементов.

Подписка на события нескольких элементов

SVG.js поддерживает группировку элементов через group(), что позволяет подписывать обработчики сразу на несколько объектов:

const group = draw.group();
const circle1 = draw.circle(50).fill('#0f6').move(50, 50);
const circle2 = draw.circle(50).fill('#06f').move(150, 50);

group.add(circle1).add(circle2);

group.on('click', function() {
    console.log('Клик по группе элементов');
});

Ключевые моменты:

  • События на группе распространяются на все дочерние элементы.
  • Можно комбинировать обработку событий на уровне группы и отдельных элементов.

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

SVG.js позволяет связывать с элементами собственные данные и использовать их внутри обработчиков:

rect.data('id', 42);

rect.on('click', function(event) {
    const id = this.data('id');
    console.log('ID элемента:', id);
});

Особенности:

  • Метод data() хранит произвольные значения, доступные через обработчики.
  • Можно хранить как простые значения, так и объекты с набором свойств.

События касания для мобильных устройств

Для работы на сенсорных экранах события мыши можно комбинировать с touchstart, touchmove, touchend:

rect.on('touchstart', function(event) {
    console.log('Элемент коснутся пальцем');
});
  • Это обеспечивает интерактивность элементов на мобильных устройствах.
  • Объект события содержит массив touches с координатами касаний.

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

  • Интерактивные кнопки – изменение цвета и формы при наведении и клике.
  • Динамические графики – отображение данных при наведении на точки графика.
  • Игровые интерфейсы – обработка кликов и перетаскиваний объектов.

Эти возможности делают SVG.js мощным инструментом для построения интерактивных векторных интерфейсов с полной поддержкой событий мыши и касаний.

Оглавление