Click и dblclick

Snap.svg предоставляет мощный и удобный интерфейс для работы с векторной графикой в браузере, включая возможность обработки событий мыши на элементах SVG. Два наиболее часто используемых события — это click и dblclick, которые позволяют реагировать на одиночные и двойные нажатия мыши соответственно.

Метод click

Метод click используется для назначения обработчика события одиночного клика на элемент SVG. Он применяется к любому объекту, созданному через Snap.svg, будь то прямоугольник, круг, линия, текст или группа элементов.

Синтаксис:

element.click(function(event) {
    // действия при клике
});
  • element — объект Snap.svg, например, результат вызова paper.rect(...) или paper.circle(...).
  • event — объект события JavaScript, содержащий информацию о позиции клика, кнопке мыши и модификаторах (Ctrl, Shift и т.д.).

Пример:

var s = Snap(400, 400);
var rect = s.rect(50, 50, 100, 100).attr({fill: '#3498db'});

rect.click(function(event) {
    rect.attr({fill: '#e74c3c'});
    console.log('Клик по прямоугольнику:', event.clientX, event.clientY);
});

В данном примере при клике на прямоугольник его цвет меняется с синего на красный, а координаты клика выводятся в консоль.

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

  • Snap.svg автоматически связывает обработчик с элементом, используя внутреннюю обертку над стандартным addEventListener.
  • Можно назначить несколько обработчиков клика, вызов которых происходит последовательно.
  • В обработчике доступно свойство this, указывающее на элемент, на который кликнули.

Метод dblclick

Событие dblclick фиксирует двойной клик мыши и часто используется для запуска более сложных действий, чем при одиночном клике.

Синтаксис:

element.dblclick(function(event) {
    // действия при двойном клике
});
  • event — объект события, аналогичный объекту в click.

Пример:

var s = Snap(400, 400);
var circle = s.circle(200, 200, 50).attr({fill: '#2ecc71'});

circle.dblclick(function(event) {
    circle.attr({fill: '#f1c40f'});
    console.log('Двойной клик по кругу');
});

При двойном клике на круг его цвет меняется на жёлтый, а в консоль выводится сообщение.

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

  • dblclick срабатывает только после фиксированного промежутка времени между двумя кликами. Этот интервал определяется браузером и не настраивается в Snap.svg.
  • Двойной клик не отменяет событие одиночного клика, если обработчик click уже был назначен; иногда для разделения поведения используется временная задержка или проверка числа кликов.

Практическое сочетание click и dblclick

Для интерактивных интерфейсов часто требуется различать одиночный и двойной клик на одном элементе. Snap.svg не имеет встроенного механизма различения, поэтому используют дополнительную логику:

var timer;
rect.click(function(event) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        console.log('Одиночный клик');
    }, 250);
});

rect.dblclick(function(event) {
    clearTimeout(timer);
    console.log('Двойной клик');
});

Здесь используется таймер для задержки обработки одиночного клика. Если срабатывает двойной клик, таймер очищается и действие одиночного клика не выполняется.

События на группах и динамически созданных элементах

Snap.svg позволяет назначать обработчики на группы элементов (g):

var group = s.group(rect, circle);
group.click(function() {
    console.log('Клик по группе');
});
  • Любое событие на дочернем элементе будет всплывать до группы.
  • Можно фильтровать события внутри группы через event.target.

Для динамически создаваемых элементов обработчики добавляются аналогично, сразу после создания элемента. Snap.svg гарантирует корректное связывание событий с каждым объектом.

Полезные свойства объекта события

При работе с click и dblclick часто используют следующие свойства event:

  • event.clientX, event.clientY — координаты клика относительно окна браузера.
  • event.pageX, event.pageY — координаты клика относительно всей страницы.
  • event.target — элемент, по которому произошел клик.
  • event.shiftKey, event.ctrlKey, event.altKey — состояние клавиш-модификаторов.
  • event.button — какая кнопка мыши была нажата (0 — левая, 1 — средняя, 2 — правая).

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

События на анимационных элементах

Snap.svg поддерживает анимации, и события click и dblclick могут быть связаны с элементами, находящимися в процессе анимации:

circle.animate({cx: 300}, 1000, mina.easeinout);

circle.click(function() {
    console.log('Клик по анимированному кругу');
});
  • Обработчик срабатывает независимо от текущей позиции элемента в анимации.
  • Для синхронизации действий с анимацией можно использовать колбэки animate совместно с событиями мыши.

Советы по оптимизации

  • Для большого числа интерактивных элементов рекомендуется использовать делегирование событий через группы, чтобы минимизировать количество назначенных обработчиков.
  • Очистка таймеров при сочетании click и dblclick предотвращает некорректное срабатывание событий.
  • Проверка event.target позволяет различать клики на конкретных элементах внутри сложных SVG-композиций.

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

Оглавление