Href= "javascript:" vs. href= "javascript: void (0)"

Наше веб-приложение полностью отображается в браузере.
Сервер только разговаривает с браузером через сообщения JSON.

В результате нам нужна только одна страница для приложения, и в основном все теги <a> не имеют реального href, указывающего на другие страницы.

В моих поисках удаления ненужных вещей мне было интересно, могу ли я избавиться от zillions void(0), которые у нас есть в нашем коде, поскольку они кажутся бесполезными:

<a onclick="fn()">Does not appear as a link, because there no href</a>
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

Кто-нибудь знает, может ли возникнуть проблема с использованием href="javascript:"?
Он работает даже на IE7...

Пожалуйста, не тратьте свое драгоценное время, чтобы сказать мне, что встроенный javascript плох, поскольку он генерируется движком шаблона:)

Ответы

Ответ 1

Это не вызывает проблем, но это трюк, чтобы сделать то же самое, что PreventDefault

когда вы находитесь на странице и якорь:

<a href="#" onclick="fn()">click here</a>

вы перейдете к вершине, и URL будет содержать якорь #, чтобы избежать этого просто return false; или использовать javascript:void(0);

относительно ваших примеров

<a onclick="fn()">Does not appear as a link, because there no href</a>

просто сделайте a {text-decoration:underline;}, и у вас будет ссылка "a-like" 

<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

это нормально, но в конце function в конце, просто return false;, чтобы предотвратить поведение по умолчанию, вам больше не нужно ничего делать.

Ответ 2

При использовании javascript: в навигации возвращаемое значение выполненного script, если оно есть, становится содержимым нового документа, который отображается в браузере. Оператор void в JavaScript вызывает возвращаемое значение выражения, следующего за ним, для возврата undefined, что предотвращает это действие. Вы можете попробовать это самостоятельно, скопировать следующее в адресную строку и нажать return:

javascript:"hello"

Результатом является новая страница с только словом "привет". Теперь измените его на:

javascript:void "hello"

... ничего не происходит.

Когда вы пишете javascript: самостоятельно, выполняется script, поэтому результат выполнения script также undefined, поэтому браузер ничего не делает. Это делает следующие более или менее эквивалентными:

javascript:undefined;
javascript:void 0;
javascript:

За исключением того, что undefined можно переопределить, объявив переменную с тем же именем. Использование void 0, как правило, бессмысленно, и оно в основном уменьшилось с void functionThatReturnsSomething().

Как отмечали другие, лучше использовать return false; в обработчике кликов, чем использовать протокол javascript:.

Ответ 3

Использование 'javascript: void 0' вызовет проблему в IE

когда вы нажмете ссылку, это вызовет событие onbeforeunload окна

<!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
    alert( 'oops!' );
};
</script>
</body>
</html>

Ответ 4

Этот метод выглядит нормально во всех браузерах, если вы установите onclick с событием jQuery:

<a href="javascript:;">Click me!</a>

Как было сказано ранее, href= "#" с изменением хеша URL-адреса и может инициировать повторную загрузку данных, если вы используете плагин JS (или ba-bbq).

Ответ 5

вы можете сделать их всех #.

Затем вам нужно добавить return false; в конец любой функции, которая вызывается onclick якоря, чтобы страница не переместилась вверх.

Ответ 6

Обычно я не использую href и не изменяю аспект с помощью css, что делает их ссылкой. Таким образом, вам не нужно беспокоиться о эффекте ссылки вообще, кроме обработчика событий вашего приложения

a {
  text-recoration: underline;
  cursor: pointer;
}

Ответ 7

Почему все события click в качестве a href ссылок?

Если вместо этого вы используете теги span с :hover CSS и соответствующими событиями onclick, это полностью обойдется проблеме.

Ответ 8

JavaScript: недействительным (0); → this выполняет функцию void и возвращает undefined. Это может иметь проблемы с IE. Javascript :; → ничего не делает. безопаснее создавать мертвые ссылки. '#' → это означает указание на тот же DOM, он перезагрузит страницу нажатием.