Отключение взаимодействия с элементами

В интерактивных пошаговых руководствах, создаваемых с помощью Intro.js, часто возникает необходимость временно блокировать взаимодействие пользователя с определёнными элементами страницы. Это особенно актуально, когда шаги руководства требуют внимания к конкретным элементам или предотвращения действий, которые могут нарушить логику процесса. Intro.js предоставляет для этого несколько встроенных возможностей и подходов, которые позволяют гибко управлять поведением элементов на каждом шаге.

Использование параметра disableInteraction

Ключевым инструментом для блокировки взаимодействия является свойство disableInteraction, которое можно задавать для каждого шага в массиве конфигурации:

introJs().setOptions({
  steps: [
    {
      element: '#submitButton',
      intro: 'Нажатие здесь временно заблокировано.',
      disableInteraction: true
    },
    {
      element: '#inputField',
      intro: 'Поле можно редактировать.',
      disableInteraction: false
    }
  ]
}).start();

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

  • При значении true все клики и фокус на элемент блокируются.
  • Элемент визуально подсвечивается рамкой, но становится недоступным для событий click, focus и др.
  • Свойство работает на уровне конкретного шага, что позволяет selectively блокировать действия только там, где это необходимо.

Блокировка всей страницы

Иногда требуется заблокировать не отдельный элемент, а весь интерфейс, кроме текущего шага. Для этого используется CSS-класс .introjs-overlay, накладываемый на фон:

.introjs-overlay {
  pointer-events: none; /* запрещает клики по фону */
}

.introjs-tooltip {
  pointer-events: auto; /* позволяет взаимодействовать с подсказкой */
}

Принцип работы:

  • Фон блокируется полностью, предотвращая любые действия пользователя.
  • Подсказка остаётся интерактивной (если требуется), что позволяет размещать кнопки “Далее” или элементы управления прямо внутри тултипа.
  • Такой подход часто применяется для комплексных форм, где шаги руководства должны строго соблюдаться по очереди.

Временная блокировка через события

Intro.js поддерживает события жизненного цикла шагов (onbeforechange, onafterchange, onchange), которые позволяют динамически отключать или включать элементы:

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Шаг 1' },
    { element: '#step2', intro: 'Шаг 2' }
  ]
});

intro.onbeforechange(function(targetElement) {
  if (targetElement.id === 'step2') {
    targetElement.style.pointerEvents = 'none'; // блокируем взаимодействие
  } else {
    targetElement.style.pointerEvents = 'auto'; // разрешаем взаимодействие
  }
});

intro.start();

Применение:

  • Позволяет задавать сложную логику блокировки элементов в зависимости от текущего шага.
  • Можно комбинировать с disableInteraction для максимальной гибкости.
  • Удобно для динамических интерфейсов, где элементы появляются или скрываются во время пошагового обучения.

Комбинированные подходы

Для создания более комплексного поведения можно сочетать:

  1. disableInteraction для базовой блокировки кликов на элементе.
  2. CSS-блокировку через .introjs-overlay для предотвращения взаимодействия с остальной страницей.
  3. Динамическое управление pointer-events через события Intro.js для условной активации элементов.

Пример комплексной настройки:

introJs().setOptions({
  steps: [
    {
      element: '#formField',
      intro: 'Поле заблокировано для изменений на этом шаге',
      disableInteraction: true
    },
    {
      element: '#nextButton',
      intro: 'Теперь можно нажать кнопку для перехода',
      disableInteraction: false
    }
  ]
}).onchange(function(targetElement) {
  if (targetElement.id === 'formField') {
    document.body.querySelector('#sidebar').style.pointerEvents = 'none';
  } else {
    document.body.querySelector('#sidebar').style.pointerEvents = 'auto';
  }
}).start();

Особенности работы с интерактивными элементами

  • Формы и поля ввода: disableInteraction блокирует ввод, но стилизация подсветки остаётся, что визуально показывает, на что обращено внимание.
  • Кнопки и ссылки: блокировка предотвращает любые события click. Для ссылок можно дополнительно использовать preventDefault через события Intro.js.
  • Динамически создаваемые элементы: для блокировки нужно убедиться, что элемент существует в DOM к моменту инициализации шага. Если элемент генерируется позднее, блокировку применяют через onafterchange.

Важные рекомендации

  • Не рекомендуется комбинировать disableInteraction: true с интерактивными действиями внутри элемента, так как это создаёт конфликт поведения.
  • Для шагов, где требуется полная блокировка интерфейса, лучше использовать overlay-блокировку с отдельной подсказкой.
  • При больших формах стоит проверять совместимость с клавиатурной навигацией (tabindex) — блокировка должна работать корректно и для фокусировки через клавиши.

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

Оглавление