Настройка кликабельности

Toastify — это легковесная библиотека для создания уведомлений в веб-приложениях на JavaScript. Одной из важных возможностей является управление интерактивностью уведомлений, включая настройку кликабельности, что позволяет уведомлению реагировать на действия пользователя.

Основной принцип кликабельности

Каждое уведомление в Toastify создаётся с помощью функции Toastify({...}).showToast(). Настройка кликабельности осуществляется через несколько ключевых опций:

  • onClick — функция, которая вызывается при клике на уведомление.
  • stopOnFocus — флаг, который определяет, будет ли уведомление останавливаться при наведении курсора.
  • close — добавляет крестик для ручного закрытия уведомления.

Пример базового кликабельного уведомления:

Toastify({
    text: "Нажмите на это уведомление",
    duration: 3000,
    close: true,
    onClick: function() {
        alert("Уведомление было нажато!");
    }
}).showToast();

В этом примере уведомление исчезнет через 3 секунды, но при клике на него сработает onClick и отобразится alert.

Управление переходами по ссылке

Для создания уведомления, которое перенаправляет пользователя на другую страницу, можно использовать window.location.href внутри функции onClick:

Toastify({
    text: "Перейти на страницу документации",
    duration: 5000,
    onClick: function() {
        window.location.href = "https://www.example.com/docs";
    }
}).showToast();

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

Кликабельность и закрытие уведомлений

Опция close добавляет на уведомление кнопку закрытия, которая не конфликтует с onClick. Если требуется, чтобы клик по самому уведомлению и клик по кнопке закрытия выполняли разные действия, их можно обрабатывать отдельно:

Toastify({
    text: "Клик и закрытие разные действия",
    duration: 4000,
    close: true,
    onClick: function() {
        console.log("Уведомление кликнуто");
    }
}).showToast();

Кнопка закрытия автоматически скрывает уведомление, не вызывая onClick.

Прерывание автоскрытия при наведении

Опция stopOnFocus предотвращает автоматическое исчезновение уведомления при наведении курсора. Это полезно для уведомлений с кликабельными элементами внутри, чтобы пользователь успел взаимодействовать:

Toastify({
    text: "Наведи курсор, чтобы остановить исчезновение",
    duration: 5000,
    stopOnFocus: true,
    onClick: function() {
        console.log("Уведомление кликнуто");
    }
}).showToast();

Кастомизация кликабельной области

По умолчанию клик регистрируется на всей области уведомления. Если нужно сделать кликабельной только часть уведомления, например кнопку внутри текста, можно использовать HTML в text и делегирование событий через document.querySelector:

Toastify({
    node: (() => {
        const container = document.createElement("div");
        container.innerHTML = `Нажмите <button id="myButton">здесь</button>`;
        container.querySelector("#myButton").addEventListener("click", () => {
            alert("Кнопка нажата!");
        });
        return container;
    })(),
    duration: 5000
}).showToast();

Использование node позволяет полностью контролировать структуру уведомления и распределение кликов.

Особенности работы с несколькими уведомлениями

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

["Первое", "Второе", "Третье"].forEach(text => {
    Toastify({
        text: text,
        duration: 4000,
        onClick: function() {
            console.log(`Уведомление "${text}" кликнуто`);
        }
    }).showToast();
});

Такой подход предотвращает смешение кликов и обеспечивает точное управление интерактивностью.

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

  • Использовать onClick для любых интерактивных действий.
  • Включать stopOnFocus, если уведомление содержит элементы для клика.
  • Разделять действия клика по уведомлению и кнопки закрытия через close.
  • Для сложной разметки использовать node и обработку событий внутри кастомного HTML.
  • При множественных уведомлениях назначать уникальные обработчики через замыкания или отдельные функции.

Эти методы обеспечивают гибкую настройку кликабельности, делая уведомления в Toastify полностью интерактивными и управляемыми.

Оглавление