Как предотвратить нажатие по ссылке?

Проблема по умолчанию

Ссылка <a> по умолчанию переводит на URL. Иногда нужно предотвратить это поведение, чтобы выполнить собственную логику.

Способ 1: preventDefault (правильный)

Используй event.preventDefault() в обработчике клика:

// Ванильный JavaScript
const link = document.querySelector('a');
link.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Клик по ссылке блокирован');
  // Твоя логика здесь
});

// HTML
<a href="https://google.com" id="myLink">
  Эта ссылка не сработает
</a>

Способ 2: React компонент

import { useNavigate } from 'react-router-dom';

export function CustomLink({ href, children }) {
  const navigate = useNavigate();
  
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Выполнили свою логику');
    navigate(href);
  };
  
  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
}

// Использование
<CustomLink href="/profile">Перейти в профиль</CustomLink>

Способ 3: Кнопка вместо ссылки

Если ссылка не ведёт никуда, лучше использовать <button>:

// Неправильно
<a href="#" onClick={handleClick}>
  Действие
</a>

// Правильно — это кнопка, а не ссылка
<button onClick={handleClick}>
  Действие
</button>

// Или стилизуем кнопку под ссылку
<button 
  onClick={handleClick}
  className="text-link hover:underline bg-transparent border-none cursor-pointer"
>
  Действие
</button>

Способ 4: Условная навигация

Предотвратить переход, если выполнено условие:

export function ConditionalLink({ href, isDisabled, children }) {
  const handleClick = (event) => {
    if (isDisabled) {
      event.preventDefault();
      alert('Эта ссылка недоступна');
    }
  };
  
  return (
    <a 
      href={href} 
      onClick={handleClick}
      style={{ 
        opacity: isDisabled ? 0.5 : 1,
        pointerEvents: isDisabled ? 'none' : 'auto'
      }}
    >
      {children}
    </a>
  );
}

// Использование
<ConditionalLink href="/admin" isDisabled={!user.isAdmin}>
  Админ-панель
</ConditionalLink>

Способ 5: Обработка средней кнопки мыши

Если нужно блокировать только основную кнопку:

export function SmartLink({ href, children }) {
  const handleClick = (event) => {
    // Пропускаем, если нажата средняя кнопка (ctrl/cmd + клик)
    if (event.button !== 0 || event.ctrlKey || event.metaKey) {
      return;
    }
    
    event.preventDefault();
    // Выполняем свою логику
    console.log('Основная кнопка мыши блокирована');
  };
  
  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
}

Сравнение способов

Практический пример из фронта

// components/Link.tsx
import { FC, ReactNode } from 'react';

interface LinkProps {
  href: string;
  onClick?: (e: React.MouseEvent) => void;
  children: ReactNode;
  disabled?: boolean;
}

export const Link: FC<LinkProps> = ({ 
  href, 
  onClick, 
  children, 
  disabled = false 
}) => {
  const handleClick = (e: React.MouseEvent) => {
    if (disabled) {
      e.preventDefault();
      return;
    }
    
    onClick?.(e);
  };
  
  return (
    <a 
      href={href} 
      onClick={handleClick}
      className={disabled ? 'opacity-50 cursor-not-allowed' : ''}
    >
      {children}
    </a>
  );
};

Важные моменты

1. preventDefault работает в обработчиках события — нельзя заблокировать ссылку HTML-атрибутом
2. Если это не ссылка — используй кнопку — это лучше для доступности
3. Помни про средний клик — люди часто открывают ссылки в новой вкладке
4. Добавляй визуальные индикаторы — показывай, что ссылка недоступна

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