Ссылки, используемые для активации функций JavaScript

Какое значение “href” следует использовать для ссылок JavaScript, “#” или “javascript:void(0)”?

При создании приложения с использованием обычного JavaScript иногда возникает необходимость запускать функцию, когда пользователь нажимает на ссылку.

Обычно это можно сделать двумя способами.

Предположим, функция, которую вы хотите выполнить, называется handleClick():

function handleClick() {
  alert('clicked')
}

Первый способ – использовать ссылку, подобную этой:

<a href="#" onclick="handleClick()">Click here</a>

Второй способ заключается в использовании

<a href="javascript:void(0)" onclick="handleClick()">Click here</a>

Они оба очень похожи по синтаксису, разница лишь в значении атрибута href.

Первый – href=”#”, второй – href=”javascript:void(0)”. Вы также можете встретить такой синтаксис href=”javascript:;”, который эквивалентен второму.

Итак, в чем же разница в поведении этих двух методов?

Когда пользователь нажимает на ссылку href=”#”, вы должны убедиться, что возвращаете false из обработчика события, иначе браузер прокрутит страницу обратно в начало:

function handleClick() {
  alert('clicked')
  return false
}

Кроме того, даже если вы добавите это, но JavaScript будет отключен или не будет выполняться по какой-то причине, браузер прокрутит страницу назад к началу страницы. Этого почти всегда нужно избегать, поэтому лично я бы использовал вторую форму, href=”javascript:void(0)”.

В обоих случаях функция handleClick() не будет вызвана, если JavaScript отключен, или в JavaScript есть ошибка, и поэтому выполнение JavaScript приостановлено.

Чтобы предотвратить это, вы можете использовать реальный URL в href в качестве запасного варианта, чтобы браузеры переводили пользователя на определенную страницу, используя метод GET HTTP, хотя это не всегда возможно или удобно.

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

Если что-то пойдет не так, пользователь будет винить вас и ваши неработающие ссылки 🙂 .

Оригинал: “https://flaviocopes.com/links-for-javascript/”