Предотвращение действий по умолчанию

Driver.js — это мощная библиотека для создания пошаговых интерактивных руководств по интерфейсу. Одной из ключевых возможностей является контроль над поведением пользователя при прохождении шагов, включая предотвращение стандартных действий браузера, таких как переход по ссылке, отправка формы или скроллинг.

Опция allowClose и контроль закрытия шагов

Каждый шаг Driver.js можно настраивать с помощью объекта конфигурации. Одним из параметров является allowClose. По умолчанию пользователь может закрыть подсказку кликом вне нее или нажатием Esc. Установка allowClose: false блокирует стандартное поведение закрытия, что позволяет принудительно удерживать внимание пользователя на текущем шаге:

const driver = new Driver({
    allowClose: false,
});

driver.defineSteps([
    {
        element: '#submit-button',
        popover: {
            title: 'Кнопка отправки',
            description: 'Нажмите эту кнопку только после заполнения всех полей.',
            position: 'bottom'
        }
    }
]);

driver.start();

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

Блокировка кликов по элементам

Driver.js позволяет блокировать взаимодействие с элементами, которые находятся под текущим шагом. Для этого используется опция onNext и метод preventDefault в обработчике событий:

driver.defineSteps([
    {
        element: '#link-to-page',
        popover: {
            title: 'Ссылка',
            description: 'Нажатие на ссылку заблокировано до конца шага.',
            position: 'right'
        },
        onNext: function (el) {
            el.addEventListener('click', function(event) {
                event.preventDefault();
                alert('Переход заблокирован до завершения шага.');
            });
        }
    }
]);

Ключевой момент: event.preventDefault() останавливает стандартное действие браузера, сохраняя контроль над пользовательским опытом.

Управление формами

При работе с формами часто необходимо предотвратить их отправку до завершения интерактивного руководства. Driver.js не предоставляет встроенной функции для этого, но можно использовать стандартные методы Jav * aScript:

const form = document.querySelector('#registration-form');

driver.defineSteps([
    {
        element: '#registration-form',
        popover: {
            title: 'Форма регистрации',
            description: 'Заполните все поля перед отправкой.',
            position: 'top'
        },
        onNext: function () {
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                alert('Отправка формы заблокирована до конца шага.');
            });
        }
    }
]);

Совет: Подключение preventDefault внутри onNext гарантирует, что действие будет заблокировано только на время прохождения шага.

Использование глобальных слушателей событий

Для более комплексных сценариев можно использовать глобальные обработчики событий вместе с Driver.js. Например, блокировка всех ссылок и кнопок на странице:

document.addEventListener('click', function(event) {
    if (driver.isActivated()) {
        event.preventDefault();
    }
});

Метод driver.isActivated() проверяет, активен ли в данный момент драйвер, и предотвращает все действия по умолчанию на странице.

Скрытие элементов и предотвращение взаимодействия

Driver.js позволяет скрывать элементы интерфейса или накладывать поверх них прозрачные слои. В сочетании с preventDefault это создаёт полную блокировку действий:

driver.defineSteps([
    {
        element: '#restricted-section',
        popover: {
            title: 'Блокированная секция',
            description: 'Доступ к этой секции закрыт на время шага.',
            position: 'left'
        },
        onNext: function(el) {
            el.style.pointerEvents = 'none';
        }
    }
]);

Использование pointerEvents: 'none' блокирует клики, а preventDefault обеспечивает предотвращение стандартных действий.

Итоговая стратегия

Для полноценного контроля пользовательских действий в Driver.js рекомендуется сочетать:

  1. allowClose: false – запретить закрытие подсказок.
  2. preventDefault() на событиях элементов – блокировать переходы и отправку форм.
  3. Глобальные слушатели с driver.isActivated() – предотвратить действия вне шагов.
  4. Манипуляции с pointerEvents и видимостью элементов – ограничить доступ к критическим зонам интерфейса.

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

Оглавление