onClick

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

Синтаксис

new Noty({
    text: 'Пример уведомления',
    type: 'alert',
    timeout: 5000,
    callbacks: {
        onClick: function() {
            console.log('Уведомление было кликнуто');
        }
    }
}).show();

Пояснение ключевых параметров:

  • text – текст уведомления.
  • type – тип уведомления (alert, success, warning, error, information).
  • timeout – время автозакрытия в миллисекундах.
  • callbacks.onClick – функция, вызываемая при клике на уведомление.

Функция onClick не принимает аргументов напрямую, однако внутри неё можно обращаться к текущему объекту уведомления через this.

Использование this внутри onClick

Объект this внутри обработчика ссылается на экземпляр Noty, что позволяет управлять самим уведомлением:

new Noty({
    text: 'Нажми на меня',
    type: 'information',
    callbacks: {
        onClick: function() {
            this.close(); // Закрывает уведомление
            console.log('Уведомление закрыто');
        }
    }
}).show();

В примере this.close() закрывает уведомление при клике, а console.log фиксирует событие.

Применение с функциями

Можно передавать внешние функции в onClick, что делает код более структурированным:

function handleClick(notyInstance) {
    alert('Клик по уведомлению!');
    notyInstance.close();
}

new Noty({
    text: 'Кликни для действия',
    type: 'success',
    callbacks: {
        onClick: function() {
            handleClick(this);
        }
    }
}).show();

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

Доступ к элементам DOM уведомления

Noty предоставляет доступ к корневому DOM-элементу уведомления через свойство this.bar, что позволяет динамически изменять внешний вид при клике:

new Noty({
    text: 'Измени цвет при клике',
    type: 'alert',
    callbacks: {
        onClick: function() {
            this.bar.style.backgroundColor = 'red';
        }
    }
}).show();

Сочетание с другими событиями

onClick можно комбинировать с другими колбэками, такими как onShow, onClose, afterShow, afterClose. Порядок срабатывания не зависит от других событий, и onClick вызывается только при реальном клике на уведомление:

new Noty({
    text: 'Комбинированное уведомление',
    type: 'warning',
    callbacks: {
        onClick: function() {
            console.log('Клик зафиксирован');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Практические сценарии использования

  1. Перенаправление на страницу
new Noty({
    text: 'Перейти на сайт',
    type: 'information',
    callbacks: {
        onClick: function() {
            window.location.href = 'https://example.com';
        }
    }
}).show();
  1. Открытие модального окна
new Noty({
    text: 'Показать детали',
    type: 'alert',
    callbacks: {
        onClick: function() {
            document.getElementById('modal').style.display = 'block';
        }
    }
}).show();
  1. Отмена действия после клика
new Noty({
    text: 'Нажми, чтобы отменить',
    type: 'warning',
    callbacks: {
        onClick: function() {
            this.close();
            console.log('Действие отменено');
        }
    }
}).show();

Особенности работы

  • onClick не срабатывает, если уведомление закрыто до момента клика.
  • Если используется timeout, уведомление может исчезнуть до того, как пользователь успеет кликнуть.
  • Можно комбинировать с кнопками в Noty (параметр buttons) для создания интерактивных уведомлений с выбором действий.

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

Оглавление