Как скрыть элемент чтобы с ним нельзя было взаимодействовать?

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

Это важная концепция CSS и доступности. Есть разные способы скрыть элемент, каждый с разным эффектом.

Различные способы скрытия

1. display: none (ПОЛНОЕ скрытие)

/* Элемент полностью удалён из потока документа */
.hidden {
  display: none;
}

<button class="hidden">Скрытая кнопка</button>

Эффект:

• Элемент НЕ видно на странице
• Элемент НЕ занимает место (0px х 0px)
• С элементом НЕЛЬЗЯ взаимодействовать
• Скринридер НЕ прочитает элемент
• Это как будто элемента нет

// JavaScript
const element = document.querySelector('.hidden');
console.log(element.offsetWidth); // 0
console.log(element.offsetHeight); // 0

// Элемент существует в DOM, но невидим

2. visibility: hidden (видна область, не видим сам)

/* Элемент невидим, но занимает место */
.invisible {
  visibility: hidden;
}

Эффект:

• Элемент НЕ видно
• Элемент ЗАЙМАЕТ место в layout
• С элементом НЕЛЬЗЯ взаимодействовать
• Скринридер НЕ прочитает

<!-- Пример -->
<button>Кнопка 1</button>
<button style="visibility: hidden;">Кнопка 2</button>
<button>Кнопка 3</button>

<!-- Кнопка 2 невидима, но место для неё сохранено
     Кнопка 3 будет ниже, как будто кнопка 2 всё ещё есть
-->

3. opacity: 0 (прозрачность)

/* Элемент полностью прозрачен */
.transparent {
  opacity: 0;
}

Эффект:

• Элемент НЕ видно (полностью прозрачен)
• Элемент ЗАЙМЕТ место
• С элементом МОЖНО взаимодействовать! (ВАЖНО!)
• Скринридер может прочитать

// ОПАСНО!
const button = document.querySelector('.transparent');
button.style.opacity = '0';

// Пользователь может случайно кликнуть на невидимую кнопку!
// Используй только если хочешь чтобы элемент был интерактивным

4. pointerEvents: none (отключить взаимодействие)

/* Элемент видим, но с ним нельзя взаимодействовать */
.no-events {
  pointer-events: none;
}

Эффект:

• Элемент видим
• Элемент занимает место
• С элементом НЕЛЬЗЯ взаимодействовать (клик пройдёт дальше)
• Это как будто элемента нет для мыши

<!-- Пример -->
<div style="pointer-events: none;">
  <button>Невидимая кнопка</button>
  <input type="text" placeholder="Нельзя вводить" />
</div>

<!-- Клик пройдёт через элементы -->

5. Комбинация: visibility + pointer-events

/* Невидим и с ним нельзя взаимодействовать, но место занимает */
.disabled {
  visibility: hidden;
  pointer-events: none;
}

Правильный способ для каждой ситуации

Ситуация 1: Скрыть модальное окно

/* Ситуация: пользователь закрыл модальное окно */
.modal.hidden {
  display: none; /* полностью удаляем */
}

Ситуация 2: Скрыть отключённую кнопку

/* Ситуация: кнопка отключена (например, форма не валидна) */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* opacity вместо display потому что кнопка занимает место */
}

Ситуация 3: Скрыть loading indicator после загрузки

/* Ситуация: скрыть спиннер после загрузки данных */
.spinner.hidden {
  display: none; /* полностью удаляем */
}

Ситуация 4: Скрыть dropdown когда он закрыт

/* Ситуация: dropdown закрыт, но может открыться */
.dropdown-menu {
  display: none; /* полностью скрываем */
}

.dropdown-menu.open {
  display: block; /* показываем когда открыт */
}

CSS подход для полного скрытия

/* Рекомендуемый способ скрыть элемент полностью */
.sr-only {
  /* Скрыто визуально, но доступно для скринридеров */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hidden {
  /* Полностью скрыто для всех */
  display: none;
}

JavaScript подход

// Способ 1: display none
function hideElement(element) {
  element.style.display = 'none';
}

function showElement(element) {
  element.style.display = 'block'; // или flex, grid и т.д.
}

// Способ 2: класс
function hideElement(element) {
  element.classList.add('hidden');
}

function showElement(element) {
  element.classList.remove('hidden');
}

// Способ 3: атрибут hidden
function hideElement(element) {
  element.hidden = true; // встроенный атрибут
}

function showElement(element) {
  element.hidden = false;
}

// Способ 4: aria-hidden для скринридеров
function hideFromScreenReaders(element) {
  element.setAttribute('aria-hidden', 'true');
}

React примеры

// Способ 1: условный рендеринг (ЛУЧШЕ)
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null; // элемент вообще не рендерится
  
  return (
    <div className="modal">
      <button onClick={onClose}>Закрыть</button>
      {children}
    </div>
  );
}

// Использование
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  Содержимое модального окна
</Modal>

// Способ 2: className
function Modal({ isOpen, onClose, children }) {
  return (
    <div className={`modal ${isOpen ? 'open' : 'hidden'}`}>
      <button onClick={onClose}>Закрыть</button>
      {children}
    </div>
  );
}

// Способ 3: display
function Modal({ isOpen, onClose, children }) {
  return (
    <div style={{ display: isOpen ? 'block' : 'none' }}>
      <button onClick={onClose}>Закрыть</button>
      {children}
    </div>
  );
}

Таблица сравнения методов

Практический пример: форма с ошибками

function Form() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const validate = () => {
    const newErrors = {};
    if (!email.includes('@')) newErrors.email = 'Неверный email';
    if (password.length < 6) newErrors.password = 'Пароль короче 6 символов';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      setSubmitted(true);
      // отправляем форму
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        {/* Скрываем ошибку когда её нет */}
        {errors.email && (
          <span className="error">{errors.email}</span>
        )}
      </div>

      <div>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Пароль"
        />
        {errors.password && (
          <span className="error">{errors.password}</span>
        )}
      </div>

      {/* Кнопка отключена если есть ошибки */}
      <button 
        type="submit" 
        disabled={Object.keys(errors).length > 0}
      >
        Отправить
      </button>

      {/* Скрываем сообщение об успехе пока форма не отправлена */}
      {submitted && (
        <div className="success">Форма отправлена!</div>
      )}
    </form>
  );
}

Итого

Выбор метода скрытия:

1. display: none - когда нужно полностью удалить элемент из потока
2. visibility: hidden - когда нужно сохранить место в layout
3. opacity: 0 - когда нужно сделать прозрачным, но интерактивным
4. pointer-events: none - когда нужно отключить клики
5. hidden attribute - встроенный способ HTML5
6. Условный рендеринг в React - лучший способ для React компонентов

Для большинства случаев используй display: none или условный рендеринг в React.