Функция по клику в JavaScript: сравнение href и onclick
Быстрый ответ
// Для вызова callback-функции в стиле джедаев с поддержкой мидихлориан используйте onclick и возвращайте false, чтобы предотвратить переход по ссылке:
<a href="#" onclick="useTheForce(); return false;">Попробуй onclick, Люк!</a>
// Для перехода на новый URL пользуйтесь href:
<a href="/Death-Star-Blueprints.html">Скачать чертежи Звезды Смерти</a>
onclick
служит для вызова функций JavaScript, когда перенаправление на другую страницу не требуется. Возврат false предотвратит переход по ссылке. href
же используется для стандартной навигации и улучшает позиционирование сайта в поисковых системах.
Анализируем href и onclick
href
и onclick
выполняют разные функции в сфере гиперссылок, но иногда их обязанности могут пересекаться. href
надежно перенаправляет на новую страницу или якорный тег, в то время как onclick
активирует функционал JavaScript на текущей странице. Не забывайте о необходимости правильно задавать href
с точки зрения SEO и доступности контента при отключенном JavaScript.
Доступность для различных пользователей
Важно, чтобы каждый мог воспользоваться вашим сайтом, включая поисковых роботов. Атрибут href
сделает ссылки доступными для фокусировки и навигации. Чтобы повысить доступность, добавляйте атрибут title
и роль aria
.
Варианты работы в чрезвычайных ситуациях
Если JavaScript в браузере отключен, должна быть предусмотрена альтернативная навигация. Атрибут nohref
может оказаться полезным в ситуациях, когда переход по ссылке не требуется.
Интеграция HTML и JavaScript
Для обеспечения повышенной структурированности кода используйте addEventListener
для привязки обработчиков событий, избегая при этом встраивания кода JavaScript напрямую в HTML.
Визуализация
Если мы представим управление ссылками как командный центр, где существуют тропы A (href
) и B (onclick
), то href
будет основным маршрутом для достижения цели, а onclick
— секретным порталом для выполнения дополнительных функций.
Работа со свойствами JavaScript
Предупреждение нежелательных переходов
Используйте e.preventDefault()
для предотвращения стандартного поведения ссылок, сохраняя в то же время другие функции браузера, такие как доступность с клавиатуры.
Визуальные эффекты с использованием this
Чтобы обратиться к элементу, инициировавшему событие, используйте this
и его свойства для создания динамичных эффектов.
Исключение небезопасных методов
Избегайте использования устаревшего псевдо-протокола javascript:
в href
, так как он может создать уязвимости. Вместо этого применяйте href="javascript:void(0);"
с учетом лучших практик кодирования.
Создание универсального веб-пространства
Стилизация ссылок играет важную роль в восприятии пользователем вашего сайта. Применяйте CSS для улучшения внешнего вида ссылок, а cursor: pointer;
будет сигнализировать пользователю о том, что элемент кликабелен.
Полезные материалы
Перечень ресурсов, где вы можете узнать больше о работе с событием onclick
, применении href
, дискуссиях о возможности замены ссылок на кнопки, справочниках по событиям JavaScript, работе со слушателями событий и использовании data-атрибутов.