Вызов JavaScript функции вместо перехода по ссылке в HTML

Быстрый ответ

Для прямого вызова JavaScript из ссылки примените обработчик onclick и обездействуйте href:

<a href="#" onclick="event.preventDefault(); вашаФункция();">Кликните сюда</a>

Таким образом, функция будет активирована без перезагрузки страницы.

Запуск функции при помощи якорного элемента

Якорь обычно перенаправляет на другой адрес, но его можно привлечь для активации JavaScript.

Нейтрализация ссылки

Чтобы заблокировать переход по ссылке, используйте в связке href="#" и event.preventDefault():

<a href="#" onclick="event.preventDefault(); замечательныеДействия();">Сотворите чудо</a>

Подробнее об этом расскажет наш спикер на видео

Применение псевдо-протокола javascript

Ещё один способ отключить действие ссылки:

<a href="javascript:void(0);" onclick="замечательныеДействия();">Кликните и удивитесь!</a>

Визуальная подача

Сделайте так, чтобы ссылка, активизирующая функцию, выглядела знакомо:

a.function-anchor {
  cursor: pointer;
  color: #0645AD;
  text-decoration: underline;
}
a.function-anchor:hover {
  color: #0B0080;
}

<a href="#" onclick="event.preventDefault(); замечательныеДействия();" class="function-anchor">Сотворите чудо</a>

Теперь ваша ссылка превратилась в супергероя, но в более стильных очках 👓.

Расширение горизонтов: Альтернативные методы

Бесхитростная мощь JavaScript

Предпочтительнее применять внешние обработчики событий JavaScript:

document.getElementById('myLink').addEventListener('click', function(event){
    event.preventDefault();
    вашаФункция();
});

Меньше «спагетти-кода» — это лучше для всех 🍝.

Контекст важен

Если ваша цель — активация функции, то иногда уместнее использовать <button>:

<button type="button" onclick="вашаФункция();">Пробудите магию</button>

Это как волшебные туфли, которые можно превратить обратно в обычные.

SEO и доступность

Для лиц с ограниченными возможностями зрения

Сделайте ваши интерактивные элементы доступными для специального программного обеспечения:

<a href="#" onclick="event.preventDefault(); замечательныеДействия();" aria-label="Совершить чудо">Совершите волшебные действия</a>

Чтобы чудеса были доступны каждому 🧚‍♂️.

Аспекты SEO

Не забывайте, что для поисковых роботов скрытые пути JavaScript — это как ниндзя в тени. Для SEO предпочтительнее использовать обычные ссылки <a href="...">.

Сопровождение, производительность и лучшие практики

Чистота кода

Отделите JavaScript от HTML, назначая обработчики событий в отдельных файлах:

document.getElementById('myLink').addEventListener('click', обработчик);

<a href="#" id="myLink">Активировать myFunction</a>

Всё аккуратно и элегантно. Как в зен-саду 🌾.

Предупреждение XSS-атак

Безопасность нас превыше всего, поэтому следите за валидацией пользовательских данных, чтобы предотвратить кросс-сайтовые сценарии.

Трудно перебздеть в таких вопросах, не так ли?

Визуализация

Воспринимайте <a> как билет на поезд, где href — это путь, которым движется состав. Но нам нужен особенный маршрут, отмеченный JavaScript.

**Обычный билет**:
<a href="/destination">Путь к цели</a>
🚂  --------> 🎯

**Билет на особую тропу**:
<a href="javascript:void(0);" onclick="javascriptFunction();">В путешествие с магией</a>
🚀  --(функция)--> 🌟

Вкратце:

• <a href="..."> — проверенный временем способ обращения.
• <a onclick="..."> — наш новый космический корабль к звёздам.

Полезные материалы

1. Введение в события – Учим веб-разработку | MDN — базовая информация об событиях в области JavaScript и веб-разработки.
2. HTML атрибут события onclick — подробные примеры и всеобъемлющие объяснения атрибута onclick.
3. Введение в события браузера — исчерпывающее описание событий браузера и их обработки.
4. javascript – Как удалить все обработчики событий у элемента? – Stack Overflow — дискуссия и решения проблемы управления обработчиками событий.
5. <a>: Элемент якоря – HTML: HyperText Markup Language | MDN — подробное руководство по <a>, объясняющее, как заменить стандартное использование href на вызовы JavaScript.
6. Обработка событий :: Красноречивый JavaScript — захватывающая глава о механизмах обработки событий.
7. Делегирование событий в JavaScript проще, чем вы думаете — SitePoint — ясное объяснение делегирования событий, очень полезное при замене href на JavaScript.