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

Я использую код JavaScript:недействительным(0)`.

Три причины. Поощряя использование # среди команда разработчиков неизбежно приводит к некоторым через возвращаемое значение функции, как это:

function doSomething() {
    //Some code
    return false;
}

Но потом они забывают использовать возврат сделать () в onclick и просто использоватьсделать()`.

Вторая причина для избежания # это вернуть значение false;` не будет выполняться, если вызванная функция вызывает ошибку. Следовательно, разработчики должны также помнить, чтобы правильно обрабатывать ошибки в вызываемой функции.

Третья причина заключается в том, что есть случаи, когда щелчку свойство события динамически назначается. Я предпочитаю быть в состоянии вызвать функцию или динамически назначать его без того, чтобы код функции специально для одного метода крепления или другой. Отсюда мой щелчку (или на что угодно) в HTML-разметки выглядит так:

onclick="someFunc.call(this)"

Или

onclick="someFunc.apply(this, arguments)"

Используя код JavaScript:недействительным(0)` избегает все вышеперечисленные головные боли, и я не'т найти какие-либо примеры и обратную сторону.

Так что, если вы'вновь одинокий разработчик, то вы можете четко сделать свой собственный выбор, но если вы работаете как команда, вы должны либо государства:

Используйте с href=на"#" в, убедитесь, что функция onclickвсегдавернет false;в конце, что любая вызываемая функция не выводит сообщение об ошибке, и если вы приложите функция динамически ккнопке` собственность убедитесь, а также без выдачи ошибки она возвращает false.

Или

Я использую с href="в код JavaScript:недействительным(0)&;`

Второй явно гораздо легче общаться.

Ни.

Если вы можете иметь фактический URL-адрес, который использует смысле, что как слишком. Функция onclick выиграл'т огонь, если кто-то среднего кликов по вашей ссылке, чтобы открыть новую вкладку или если они у вас отключен JavaScript.

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

Я понимаю, что это'т всегда возможно, но на мой взгляд надо стремится в развивающихся любом публичном веб-сайте.

Проверить ненавязчивый JavaScript и прогрессивное улучшение (как в Википедии).

Делала в <а href=" и#то" функция onclick="и myJsFunc (); и">ссылка</а> или в <а href="и код JavaScript:недействительным(0) и" функция onclick="и myJsFunc();" и>ссылка</а>или все остальное, что содержитатрибут onclick` - было хорошо пять лет назад, хотя сейчас это может быть плохая практика. Здесь's почему:

1. Это способствует практике навязчивых код JavaScript, который оказалось трудно поддерживать и трудно масштабировать. Подробнее об этом в ненавязчивый JavaScript.

2. Вы'вновь тратить свое время на написание невероятно слишком длинный код, который имеет очень мало (если таковые имеются) польза для вашей кодовой базы.

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

В ненавязчивый JavaScript способ

Просто Дон'т иметь атрибуте href, то на всех! Любой хороший сброс CSS будет заботиться о пропавших стиль курсора по умолчанию, так что это не проблема. Затем прикрепите функциональные возможности JavaScript, используя изящные и ненавязчивые рекомендации, которые более ремонтопригодны, как ваш JavaScript-логики остается в JavaScript, а не в разметке - это очень важно, когда вы приступить к разработке крупномасштабных JavaScript приложений, которые требуют вашей логике, чтобы быть разделена на blackboxed компоненты и шаблоны. Подробнее об этом в крупномасштабных JavaScript приложений архитектура

Простой пример кода

в

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

в

В blackboxed Backbone.js пример

Для масштабируемой, blackboxed, Backbone.js компонент пример - [см. в этом примере рабочая jsfiddle здесь][5]. Обратите внимание, как мы используем ненавязчивая практика JavaScript и в небольшое количество кода компонента, которые можно повторять по несколько раз страницу без побочных эффектов или конфликты между различными экземплярами компонента. Удивительно!

Примечания

• Опуская атрибут href, то нааэлемент приведет элемент, чтобы не быть доступной через вкладку джойстик. Если вы хотите, чтобы эти элементы, чтобы быть доступной через вкладку ключ, вы можете установить вместо `tabindex значение атрибута или элемента используйте кнопку. Вы можете легко элементы стиля кнопки выглядят как обычные ссылки, как указано в Tracker1'ы ответ.

• Опуская Солар атрибут а элемент приведет интернет&ампер;усилитель; nbsp;Обозреватель&усилителя;усилитель; nbsp;6 и интернет&усилителя;усилитель; nbsp;Обозреватель&усилителя;усилитель; nbsp;7, Чтобы не взять на себя:наведите стиль, который является, почему мы добавили простой JavaScript ШИМ для этого через `а.реять вместо. Что вполне нормально, а если вы Don'т иметь атрибут href и не изящные деградации, то ваша ссылка будет'т работать в любом случае - и вы'будете иметь больше проблем для беспокойства.

• Если вы хотите, чтобы ваши действия еще работать с JavaScript отключен, то с помощью элемента с Солар атрибут, который идет по какому-то URL, который будет выполнять действия вручную, а не через ajax-запрос или что там должен быть путь, чтобы пойти. Если вы делаете это, тогда вы хотите, чтобы убедиться, что вы делаете для себя событие.метод preventDefault () на ваш нажмите кнопку вызова, чтобы убедиться, что при нажатии кнопки он не следуйте по ссылке. Эта опция называется "плавной деградации".

'#' вернет пользователя в начало страницы, поэтому я обычно использую void(0).

javascript:; также ведет себя как javascript:void(0);.

Я бы, честно говоря, предположить не. Я хотел бы использовать стилизованные <кнопка></кнопку> за такое поведение.

в

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a link.</p>

в

Таким образом, вы можете назначить кнопке. Я также предлагаю привязку через скрипт, не через атрибут onclick в теге элемента. Единственный подводный камень-это псевдо 3D-эффект текст в старых х годов, которые не могут быть отключены.

Если вы должны использовать элемент, использовать код JavaScript:недействительным(0);` по причинам, уже упомянутым.

• Всегда будет перехватывать, в случае вашего события onclick не выполняется.
• Не будет иметь странствующий нагрузки вызовов, или вызывать другие события, основанные на изменении хэша
• Хэш-тег может привести к неожиданному поведению, если нажать проваливается (на кнопке броска), избежать его, если это'ы соответствующего падения-через поведение, и вы хотите изменить историю навигации.

Примечание: Вы можете заменить 0 на строку, например `код JavaScript:недействительным('удалить запись 123'), который может служить дополнительным индикатором, который покажет, что клик будет на самом деле делать.

Первый, в идеале с реальной ссылкой для перехода на случай, если у пользователя отключен JavaScript. Убедитесь, что возвращается false, чтобы предотвратить срабатывание события click, если JavaScript будет выполнен.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Если вы используете Angular2, этот способ работает:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

См. здесь https://stackoverflow.com/a/45465728/2803344

Ни Если вы спросите меня;

Если вашу "ссылке" есть единственная цель выполнения некоторых JavaScript-код он не'т квалифицироваться как ссылка, а кусок текста с помощью функции JavaScript выполняется. Я бы рекомендовал использовать в <промежуток> по тегу с обработчик onclick прилагается к нему и некоторые основные CSS, чтобы оно было стопроцентно похоже на ссылку. Ссылки предназначены для навигации, и если ваш JavaScript-код, это'т для навигации она не должна быть в `<а> тег.

Пример:

в

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

в

В идеале вы'd сделать это:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Или, еще лучше, вы'd имеют действия по умолчанию ссылка в HTML, и вы'д добавить событием onclick к элементу ненавязчиво через JavaScript после Дом оказывает, обеспечивая, таким образом если в браузере нет/использовать вы Don'т иметь бесполезно обработчики событий, разгадыванию кода и потенциально обфускация (или по крайней мере отвлекает от) вашего контента.

Используя только # делает какие-то смешные движения, поэтому я бы рекомендовал использовать самостоятельно, если вы хотите сохранить на вводе усилий JavaScript и бла, бла,.

Я использую следующий

<a href="javascript:;" onclick="myJsFunc();">Link</a>

вместо

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

Я соглашаюсь с предложениями других о том, что вы должны использовать правильный URL в атрибуте href, а затем вызвать функцию JavaScript в кнопке. Недостаток в том, что они автоматически добавитьвернет false` после вызова.

Проблема с этим подходом является то, что если функция не будет работать, или если будут какие-то проблемы, ссылка будет начинает периодически. Событие onclick всегда будет возвращать значение false, так что нормальный URL-адрес называть не буду.

Там's очень простое решение. Пусть функция возвращает true, если он работает правильно. Затем использовать возвращаемое значение, чтобы определить, если пункт должен быть отменен или нет:

Язык JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

В формате HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Обратите внимание, что я инвертировать результат сделать() функция. Если он работает, он будет возвращать значение true, так что он будет сведен к нулю ("ложь") и путь/к/некоторые/URL-адрес не будет называться. Если функция возвратит "ложь" (например, браузер не'т поддерживать то используется внутри функции или еще что-нибудь пойдет не так), он снимается вtrueипуть/к/некоторые/адрес` называется.

# лучше, чем в JavaScript:ничего, но следующие еще лучше:

HTML-код:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

На JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

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

Ответ удален, в знак протеста так'руководство и их лечение Моники.

Если вы'вновь пишет на ссылку с помощью JavaScript (так что вы знаете, это's не включена в браузере), вы в идеале должны предоставлять соответствующую ссылку для людей, которые просматривают с помощью JavaScript отключен и затем предотвратить действие по умолчанию ссылки в ваших событием onclick обработчик. Таким образом, такие с поддержкой JavaScript будет выполняться функция и тем, с вас отключен JavaScript будет перейти на соответствующую страницу (или расположение в пределах одной страницы), а не просто нажав на ссылку и ничего не произошло.

Наверняка решетки (#) лучше, потому что в JavaScript это pseudoscheme:

1. загрязняет истории
2. создает новый экземпляр двигателя
3. выполняется в глобальной области и не'т соблюдать системных событий.

Конечно, что "#" с собой обработчик onclick, который предотвращает действие по умолчанию - [гораздо] лучше. Кроме того, ссылка, которая имеет единственной целью, чтобы запустить JavaScript на самом деле не "по ссылке" и если вы отправляете пользователю путные якорь на странице (всего # вышлем вверх), когда что-то идет не так. Вы можете просто имитировать внешний вид и связаться с стилей и забыть о href на всех.

Кроме того, в отношении cowgod'ы предложение, особенно это: ...с href="и javascript_required.HTML-код как" функция onclick=" и... это хороший подход, но это вовсе'т различать "у вас отключен javascript" и "функция onclick не" в сценарии.

Я обычно хожу по

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Это's меньше, чем JavaScript:недействительным(0) и делает то же самое.

Я хотел бы использовать:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Причины:

1. Это делает Солар просто, поисковики это нужно. Если вы используете что-нибудь еще ( например строку), это может вызвать ошибки 404 не найдено.
2. При наведении указателя мыши на ссылку, она не'т показать, что это сценарий.
3. С помощью вернет false;, страница не'т перейти к верхней или кнопки "Назад".

Я выбираю использовать код JavaScript:недействительным(0), поскольку это может помешать щелкните правой кнопкой мыши для открытия меню. Но в JavaScript:; короче и делает то же самое.

Поэтому, когда вы делаете некоторые вещи на JavaScript с <а /> тег и если вы поставили с href=на"#" в так же, вы можете добавить возвращает false в конце мероприятия (в случае встроенного событие переплет) как:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Или вы можете изменить Солар атрибут с JavaScript, такие как:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

или

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Но семантически, все вышеперечисленные способы достижения этого являются неправильное (он работает нормально, хотя). Если какой-либо элемент не создан для навигации по странице и что есть некоторые JavaScript вещи, связанные с ним, то он не должен быть в `<а> тег.

Вы можете просто использовать <кнопка /> вместо того, чтобы делать вещи, или любые другие элементы, как b, span или что там подходит в соответствии с вашими потребностями, потому что вы не разрешили добавлять события на все элементы.

Так, есть одно преимущество для использования в <а href=на"#" и>. Вы получаете указатель курсора по умолчанию на тот элемент, когда вы делаете а href=" и#то". Для этого, я думаю, вы можете использовать CSS для курсора это как:указатель;` который решает эту проблему тоже.

И в конце, если вы не обязывающего события от самого кода JavaScript, там можно сделать событие.метод preventDefault (), чтобы достичь этого, если вы используете<и>тег, но если вы не используете в<символом> тег для этого вам преимущество, вы не'т должны сделать это.

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

Дон'т использовать для одной единственной цели выполнение JavaScript.

Использование атрибута href=на"#" и прокручивает страницу наверх; использование пустота(0) создает навигационных задач в браузере.

Вместо этого используйте другого элемента, а не ссылку:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

И стиль его с помощью CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}