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


4079

Ниже приведены два метода создания ссылки, единственной целью которой является запуск кода JavaScript. Что лучше с точки зрения функциональности, скорости загрузки страницы, целей проверки и т. Д.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

или

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


202
Если я что-то упустил, не <a href="javascript:void(0)" onclick="myJsFunc();">имеет абсолютно никакого смысла. Если вы должны использовать javascript:псевдо-протокол, вам также не нужен этот onclickатрибут. <a href="javascript:myJsFunc();">все будет хорошо.
Уэсли Мерч

65
@WesleyMurch - если myJsFunc()возвращаемое значение, ваша страница сломается. jsfiddle.net/jAd9G Вы бы все равно придется использовать voidвот так: <a href="javascript:void myJsFunc();">. Но тогда поведение все равно будет другим. Вызов ссылки через контекстное меню не вызывает clickсобытие.
gilly3

38
Почему не просто <a href="javascript:;" onclick="myEvent()"?
3k

26
javascript:;гораздо быстрее, чем печататьjavascript:void(0)
Майк Козер

78
Сначала подумал, глядя на это: «зачем вам использовать <a>тег, если вы хотите НЕ открывать другую страницу с помощью встроенной функции браузера, а иметь какое-то действие javascript 'action' для запуска? Просто используйте spanтег с классом js-triggerбудет, вероятно, намного лучше ". Или я что-то упустил?
Адриен Бе

Ответы:


2164

Я использую javascript:void(0).

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

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

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

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

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

onclick="someFunc.call(this)"

ИЛИ

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

Использование javascript:void(0)позволяет избежать всех вышеперечисленных головных болей, и я не нашел примеров недостатков.

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

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

ИЛИ

использование href="javascript:void(0)"

Со вторым явно гораздо проще общаться.


329
Я всегда открываю каждую ссылку в новой вкладке, и именно поэтому я ненавижу ее, когда люди используют этот href="javascript:void(0)"метод
Тимо Хуовинен,

182
Извините, не согласен, почему в этом ответе столько голосов? Любое использование javascript:должно считаться плохой практикой, навязчивым и не грациозным.
Lankymart

52
Следующие два ответа намного лучше и разумнее, чем этот. Кроме того, первые два аргумента являются недопустимыми, потому что они event.preventDefault()предназначены именно для того, чтобы предотвратить поведение по умолчанию (например, перейти в начало страницы в этом случае) и сделать это лучше, без return false;сумасшествия.
sudee

136
Перемотка вперед к 2013 году: javascript:void(0)нарушает политику безопасности содержимого на страницах HTTPS с поддержкой CSP. Один из вариантов будет тогда использовать href='#'и event.preventDefault()в обработчике, но мне это не очень нравится. Возможно, вы можете установить соглашение для использования href='#void'и убедиться, что ни один элемент на странице не имеет id="void". Таким образом, нажатие на ссылку на несуществующий якорь не будет прокручивать страницу.
jakub.g

24
Вы можете использовать «#», а затем привязать событие щелчка ко всем ссылкам с «#» в качестве href. Это будет сделано в jQuery с:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Натаном

1325

Ни.

Если у вас есть реальный URL, который имеет смысл, используйте его как HREF. Onclick не сработает, если кто-то щелкнет по вашей ссылке средней кнопкой мыши, чтобы открыть новую вкладку, или если у него отключен JavaScript.

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

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

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


19
Можете ли вы привести пример того, как можно «вставить тег привязки в документ с помощью JavaScript и соответствующих обработчиков событий щелчка»?
user456584

11
Зачем вообще вставлять тег привязки, если он просто предназначен для того, чтобы элемент можно было а) щелкнуть б) отобразить курсор «указатель». Кажется неуместным даже вводить тег привязки в этом сценарии.
раздавить

12
+1 ни для одного, но есть более подходов. Факт остается использованием одного javascript:или #обоих плохих методов и не должен поощряться. Хорошие статьи между прочим.
Lankymart

13
@crush: я бы тоже не использовал div или span; Честно говоря, похоже, что это <button>было сделано именно для этого. Но согласился: это, вероятно, не должно быть конкретно, <a>если нет подходящего места для ссылки.
Чао

14
Кнопка @cHao, пожалуй, лучший выбор. Я полагаю, что главное заключается в том, что HTML-элемент должен быть выбран не на основе его представления по умолчанию, а скорее как его значения для структуры документа.
раздавить

775

Делать <a href="#" onclick="myJsFunc();">Link</a>или <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>что-то еще, что содержит onclickатрибут - было хорошо пять лет назад, хотя сейчас это может быть плохой практикой. Вот почему:

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

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

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

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

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

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

// 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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Blackboxed Backbone.js пример

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

Ноты

  • Пропуск hrefатрибута aэлемента приведет к тому, что элемент будет недоступен с помощью tabклавиш навигации. Если вы хотите, чтобы эти элементы были доступны через tabключ, вы можете установить tabindexатрибут или использовать buttonэлементы вместо этого. Вы можете легко стилизовать элементы кнопок, чтобы они выглядели как обычные ссылки, как указано в ответе Tracker1 .

  • Пропуск hrefатрибута в aэлементе приведет к тому, что Internet Explorer 6 и Internet Explorer 7 не примут a:hoverстилизацию, поэтому мы добавили простую оболочку JavaScript, чтобы выполнить это через a.hover. Это совершенно нормально, так как если у вас нет атрибута href и нет постепенного ухудшения качества, тогда ваша ссылка все равно не будет работать - и у вас будут большие проблемы, о которых нужно беспокоиться.

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


163
Будьте осторожны, если атрибуты href отключены, они не совместимы с разными браузерами, и вы потеряете такие вещи, как эффекты парения в Internet Explorer
Томас Дэвис,

16
Осторожно: buttonпредложенный здесь стиль ссылки связан с неизбежным активным состоянием «3d» в IE9 и ниже .
Бреннан Робертс

44
Я считаю этот ответ слишком догматичным. Есть моменты, когда вы просто хотите применить поведение JS к 1 или 2 href. В этом случае излишне определять дополнительный CSS и вставлять целую функцию JS. В некоторых случаях (например, добавление контента через CMS) вам на самом деле не разрешено вводить новый CSS или автономный JS, и все, что вы можете сделать, это встроить. Я не вижу , как рядное решение любой менее ремонтопригодны на практике в течение 1 или 2 простой JS A HREF лет. Всегда с подозрением относитесь к общим высказываниям о плохой практике, включая эту :)
Джордан Ригер

17
Со всеми этими «заметками», которые трудно решить (установка tabindex вызывает проблемы на сложной странице!). Гораздо лучше просто сделать javascript:void(0). Это прагматичный ответ и единственный разумный ответ в реальном мире.
Абхи Беккерт

14
Если вы заботитесь о том, чтобы сделать ваше веб-приложение доступным (и вам следует), простота и здравомыслие приводят доводы в пользу href. Безумие лежит в направлении табиндекса.
Jkade

328

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

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


68
Чтобы избежать этого, нужно вернуть false в обработчике события onclick.
Гуванте

34
Возвращение false в обработчике событий не исключает того, что если JavaScript JS не запустится успешно.
Квентин

28
использование "#someNonExistantAnchorName" работает хорошо, потому что некуда перейти.
scunliffe

21
Если у вас есть базовый href, то #или #somethingприведет вас к этому якору на странице базового href , а не на текущей странице.
Абхи Бекерт

11
Шебанг ( #!) добивается цели , но это определенно плохая практика.
Нил

276

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

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 <button type="button" class="link">link</button>.</p>

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


Если вы ДОЛЖНЫ использовать элемент A, используйте его javascript:void(0);по причинам, уже упомянутым.

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

ПРИМЕЧАНИЕ. Вы можете заменить 0строку на такую, javascript:void('Delete record 123')которая может служить дополнительным индикатором, который покажет, что на самом деле будет делать щелчок.


В IE8 / IE9 я не могу удалить 1px "3D" смещение в состоянии кнопки: active.
Бреннан Робертс

@BrennanRoberts Да, к сожалению, любое оформление кнопок более проблематично с IE ... Я все еще чувствую, что это, вероятно, самый подходящий подход, не то, чтобы я не нарушал свои собственные правила иногда.
Tracker1

Тогда не использовать, <button>а input type=buttonвместо этого?
Патрик Аффентранджер

4
Тогда используйте <clickable>элемент. Или, <clickabletim>если вы предпочитаете. К сожалению, использование нестандартного тега или простого div может затруднить фокусировку элемента на клавиатуре.
Joeytwiddle

28
Этот ответ должен быть наверху. Если у вас возникла эта дилемма, скорее всего, вы действительно нуждаетесь в button. И, к счастью, IE9 быстро теряет доли рынка, и активный эффект в 1px не должен мешать нам использовать семантическую разметку. <a>это ссылка, она предназначена для того, чтобы отправить вас куда-нибудь, для наших действий <button>.
mjsarfatti

141

Первый, в идеале с реальной ссылкой, чтобы следовать в случае, если у пользователя отключен 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


19
Таким образом, в пользовательских агентах с включенным JavaScript и поддерживаемой функцией это запускает функцию JavaScript, возвращаясь (для пользовательских агентов, в которых JS отказывает по какой-либо причине) к ссылке на верх страницы? Это редко разумный запасной вариант.
Квентин

21
«В идеале, если у пользователя отключен JavaScript, нужна реальная ссылка, по которой он должен идти», он должен идти на полезную страницу, а не на #, даже если это просто объяснение того, что сайту нужен JS для работы. Что касается сбоев, я бы ожидал, что разработчик будет использовать правильное определение функций браузера и т. д. перед развертыванием.
Зак

Я предполагаю (надеюсь), что что-то подобное будет только для показа всплывающего окна или чего-то такого же простого. В этом случае по умолчанию будет отображаться URL всплывающей страницы. Если это часть веб-приложения или отключение JS полностью
сломало

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

2
Проблема в том, что если myJsFunc выдает ошибку, она не будет зафиксирована для возврата false.
Tracker1

106

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

Если ваша «ссылка» имеет единственную цель - запустить какой-либо код JavaScript, она не может рассматриваться как ссылка; скорее кусок текста с функцией JavaScript, связанной с ним. Я бы рекомендовал использовать <span>тег с onclick handlerприкрепленным к нему и несколько базовых CSS для имитации ссылки. Ссылки сделаны для навигации, и если ваш код JavaScript не для навигации, это не должен быть <a>тег.

Пример:

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>


126
Этот подход ограничивает «ссылку» только мышью. Якорь можно посетить с помощью клавиатуры, и его событие «onclick» запускается при нажатии клавиши ввода.
AnthonyWJones

40
Жесткое кодирование цветов в вашем CSS не позволит браузеру использовать пользовательские цвета, которые может определить пользователь, что может быть проблемой с доступностью.
Хосам Али

30
<span>s не предназначены, чтобы сделать что-нибудь. <A>nchors и <buttons>используются для этого!
redShadow

22
Использование buttons- лучший выбор, а использование span- нет.
Апр

1
Я думаю, что промежуток лучше, чем тег привязки. Якорный тег существует, чтобы направить вас к его обязательному атрибуту href. Если вы не собираетесь использовать href, не используйте якорь. Он не ограничивает ссылку на мышь только потому, что это не ссылка. Это не имеет HREF. Это больше похоже на кнопку, но она не публикуется. Промежуток, не предназначенный, чтобы сделать что-либо, полностью недействителен. Рассмотрим выпадающее меню, которое активируется при наведении курсора. Вероятно, это комбинация интервалов и делений, выполняющая функцию кнопки, которая расширяет область на экране.
NibblyPig

97

В идеале вы бы сделали это:

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

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


76

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


7
Ничего себе, большие пальцы за этот совет. Никогда не знал, что вы можете использовать #selfдля именованных тегов и избежать раздражающего поведения браузера при переходе на верх страницы. Спасибо.
alonso.torres

34
Для справки, #selfне кажется особенным. Любой идентификатор фрагмента, который не соответствует имени или идентификатору какого-либо элемента в документе (и не является пустым или «верхним»), должен иметь такой же эффект.
Чао

1
Я обычно просто использую выдуманное имя якоря, но я думаю, что начну делать это, чтобы быть последовательным в моей работе.
Douglas.Sesar

11
Я предложил создать #voidсоглашение в другом комментарии, но на самом деле #selfон настолько короткий и его легко запомнить. Что-нибудь лучше чем#
jakub.g

6
Но если вы щелкнете по этой ссылке, будет странно, если пользователь увидит «#void» в URL, выглядит как ошибка или ошибка, то же самое с #self или чем-то еще.
pmiranda

68

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

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

вместо

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

2
Я использую javascript:(без точки с запятой), потому что он выглядит наиболее аккуратно в строке состояния при наведении курсора.
Boann

4
Этот код может вызвать неприятные сюрпризы в старых IE. В какой-то момент он ломал любые анимационные эффекты с изображениями, включая ролловеры и даже анимированные гифки
Илья Стрельцын,

Вы всегда можете сделать ... javascript:void('Do foo')так как void будет возвращать неопределенное значение независимо, это даст пользователю индикатор того, что будет делать щелчок. Где Do fooможет быть Delete record Xили что угодно.
Tracker1

53

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

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

Там очень простое решение. Пусть функция вернется, 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>

Обратите внимание, что я отрицаю результат doSomething()функции. Если он работает, он вернется true, поэтому он будет отменен ( false) и path/to/some/URLне будет вызван. Если функция вернется false(например, браузер не поддерживает что-то используемое внутри функции или что-то еще идет не так), она отменяется trueи path/to/some/URLвызывается.


50

#лучше чем javascript:anything, но следующее даже лучше:

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.


1
@Muhd: Возврат должен активироваться clickпо ссылкам ...
Ry-

50

<button>Вместо этого я рекомендую использовать элемент, особенно если предполагается, что элемент управления приведет к изменению данных. (Что-то вроде ПОЧТЫ.)

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


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

Если бы вы спросили, и ваш href выглядел бы как «# что-то», некоторые другие перечисленные ответы могли бы послужить, но: без href, связывающего что-либо разумное, нет никакого смысла иметь href или даже ссылку вообще. Предлагаемое использование кнопки может сделать, или использовать любой другой элемент, кроме ссылки спасибо нигде.
Контур

1
Еще одним преимуществом этого является то, что Bootstrap .btnделает кнопки и ссылки выглядят одинаково.
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功

С точки зрения пользователя, buttonтакже не вводит # в URL и не показывает ahref как javascript :;
Сб

39

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


36

Определенно hash ( #) лучше, потому что в JavaScript это псевдосхема:

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

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

Кроме того, в отношении предложения cowgod, в частности: ...href="javascript_required.html" onclick="...это хороший подход, но он не различает сценарии «JavaScript отключен» и «onclick fails».


1
@ Berker Yüceer, почему CW?
Бесплатная консультация

30

Я обычно иду на

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

Он короче javascript: void (0) и делает то же самое.


27

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

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

Причины:

  1. Это делает hrefпростые поисковые системы нужными. Если вы используете что-то еще (например, строку), это может вызвать 404 not foundошибку.
  2. Когда мышь наводит указатель мыши на ссылку, это не означает, что это скрипт.
  3. При использовании return false;страница не переходит наверх и не ломает backкнопку.

я не согласен с "1" потому что это дает ошибку, когда вы ставите ссылку на скрипт, когда скрипты не разрешены. так что такие ссылки должны быть добавлены с кодом JS. таким образом, люди могут избегать этих ссылок, пока скрипт не разрешен, и вообще не видят ошибок.
Berker Yüceer

25

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


24

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

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

Или вы можете изменить атрибут href с помощью JavaScript, например:

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

или

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

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

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


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

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

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


23

Не используйте ссылки с единственной целью запуска JavaScript.

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

13
Используйте кнопку, а не промежуток. Кнопки естественным образом попадают в порядок фокуса, поэтому к ним можно получить доступ без мыши / трекпада и т. Д.
Квентин,

4
Добавление тонны комментария Квентина: как написано в данный момент, пользователи клавиатуры не достигнут spanэлемента, потому что это элемент без фокуса. Вот почему вам нужна кнопка.
Цундоку

1
Вы можете сделать это фокусируемым, добавляя tabindex="0"к промежутку. Тем не менее, использование кнопки лучше, потому что она дает вам желаемую функциональность бесплатно. Чтобы сделать его доступным с помощью диапазона, вам нужно не только прикрепить обработчик щелчков, но и обработчик событий клавиатуры, который ищет нажатия пробела или клавиши ввода, а затем запускает обычный обработчик щелчков. Вы также хотели бы изменить второй селектор CSS, .funcActuator:hover, .funcActuator:focusчтобы тот факт, что элемент имеет фокус, очевиден.
бесполезный код

22

Было бы лучше использовать JQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

и опустить оба href="#"и href="javascript:void(0)".

Разметка якорного тега будет выглядеть

<a onclick="hello()">Hello</a>

Достаточно просто!


5
Это то, что я собирался сказать. Если ссылка имеет резервный URL, который имеет смысл, используйте это. В противном случае просто опустите href или используйте что-то более семантически подходящее, чем <a>. Если единственная причина, по которой все выступают за включение href, - это указание пальцем на указатель мыши, то простой «a {cursor: pointer;}» поможет.
Мэтт Кантор

12
Это дает ужасную доступность. Попробуйте это в SO: вы не можете пометить сообщение, не используя мышь. Ссылки «ссылка» и «редактировать» доступны с помощью вкладок, а «флаг» - нет.
Николас

6
Я согласен с этим вариантом. Если у якоря нет цели, кроме JavaScript, у него не должно быть href. @Fatih: Использование jQuery означает, что если JavaScript отключен, ссылка НЕ ​​будет иметь указатель.
Скотт Риппи

3
Если вы собираетесь пойти по этому пути, почему бы не связать щелчок также с помощью jQuery? Одним из преимуществ использования jQuery является возможность отделить ваш javascript от разметки.
Чт

4
Я не могу поверить, что этот ответ имеет 11 голосов. Это ужасно. Почему вы добавляете стиль через Javascript (и jQuery ??), а затем определяете свое действие при нажатии в HTML? Грозный.
МММ

20

Если вы используете AngularJS , вы можете использовать следующее:

<a href="">Do some fancy JavaScript</a>

Который не будет ничего делать.

К тому же

  • Это не приведет вас к началу страницы, как с (#)
    • Поэтому вам не нужно явно возвращать falseс JavaScript
  • Это краткое лаконичное

6
Но это может привести к перезагрузке страницы, и поскольку мы всегда используем javascript для изменения страницы, это недопустимо.
Генри Ху

@HenryHu Я понял, что причина, по которой он не перезагружался, была из-за AngularJS. Смотрите мой обновленный ответ.
Whirlwin

19

Если нет, hrefвозможно, нет причин использовать тег привязки.

Вы можете прикрепить события (щелчок, наведение и т. Д.) Практически к каждому элементу, так почему бы просто не использовать a spanили adiv ?

И для пользователей с отключенным JavaScript: если нет запасного варианта (например, альтернативы href), они должны, по крайней мере, вообще не иметь возможности видеть и взаимодействовать с этим элементом, независимо от того, является <a>ли он <span>тегом или тегом.


19

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

Пример ... Допустим, у вас есть следующая поисковая ссылка:

<a href="search.php" id="searchLink">Search</a>

Вы всегда можете сделать следующее:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Таким образом, люди с отключенным JavaScript направляются на search.phpто, чтобы ваши зрители с помощью JavaScript могли просматривать вашу расширенную функциональность.


17

Я лично использую их в сочетании. Например:

HTML

<a href="#">Link</a>

с небольшим количеством JQuery

$('a[href="#"]').attr('href','javascript:void(0);');

или

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Но я использую это только для предотвращения перехода страницы наверх, когда пользователь нажимает на пустой якорь. Я редко использую onClick и другие onсобытия прямо в HTML.

Мое предложение было бы использовать <span>элемент с classатрибутом вместо якоря. Например:

<span class="link">Link</span>

Затем назначьте функцию .linkсценарию, заключенному в тело и непосредственно перед </body>тегом или во внешний документ JavaScript.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Примечание: для динамически создаваемых элементов используйте:

$('.link').on('click', function() {
    // do something
});

А для динамически создаваемых элементов, которые создаются с помощью динамически создаваемых элементов, используйте:

$(document).on('click','.link', function() {
    // do something
});

Затем вы можете стилизовать элемент span, чтобы он выглядел как якорь с небольшим CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Вот пример вышеупомянутого jsFiddle .


16

В зависимости от того, чего вы хотите достичь, вы можете забыть щелчок мышью и просто использовать href:

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

Обходит необходимость вернуть ложь. Мне не нравится этот #вариант, потому что, как уже упоминалось, он перенесет пользователя наверх страницы. Если вам нужно куда-нибудь отправить пользователя, если у него не включен JavaScript (что редко случается, когда я работаю, но очень хорошая идея), то предложенный Стивом метод отлично работает.

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

Наконец, вы можете использовать, javascript:void(0)если вы не хотите, чтобы кто-нибудь куда-то шел, и если вы не хотите вызывать функцию JavaScript. Это прекрасно работает, если у вас есть изображение, с которым вы хотите, чтобы происходило событие наведения мыши, но пользователю не на что нажимать.


3
Единственный недостаток этого (по памяти, я могу ошибаться) заключается в том, что IE не считает A A, если у вас нет href внутри него. (Таким образом, правила CSS не будут работать)
Benjol

16

Когда у меня есть несколько поддельных ссылок, я предпочитаю давать им класс «без ссылок».

Затем в jQuery я добавляю следующий код:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

А для HTML ссылка просто

<a href="/" class="no-link">Faux-Link</a>

Я не люблю использовать Hash-теги, если они не используются для якорей, и я делаю выше, только когда у меня более двух поддельных ссылок, в противном случае я использую javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

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


16

Я полагаю, что вы представляете ложную дихотомию. Это не единственные два варианта.

Я согласен с г-ном D4V360, который предположил, что, даже если вы используете тег привязки, у вас здесь действительно нет привязки. Все, что у вас есть, это специальный раздел документа, который должен вести себя немного иначе. <span>Тег является гораздо более подходящим.


Также, если вам нужно заменить a aна a span, вам нужно помнить, чтобы сделать его фокусируемым с помощью клавиатуры.
AndFisher

16

Я попробовал как в Google Chrome с инструментами разработчика, и id="#"заняло 0,32 секунды. Пока javascript:void(0)метод занял всего 0,18 секунды. Так что в гугл хроме javascript:void(0)работает лучше и быстрее.


На самом деле они не делают то же самое. # заставляет вас перейти на верх страницы.
Йохен Шульц

13

Я в основном перефразирую эту практическую статью, используя прогрессивное улучшение . Короткий ответ: вы никогда не используете javascript:void(0);или #если ваш пользовательский интерфейс уже не сделал вывод, что JavaScript включен, и в этом случае вы должны использоватьjavascript:void(0); . Кроме того, не используйте span в качестве ссылок, так как это семантически неверно для начала.

Использование SEO- дружественных URL-маршрутов в вашем приложении, таких как / Home / Action / Parameters, также является хорошей практикой. Если у вас есть ссылка на страницу, которая сначала работает без JavaScript, вы можете улучшить работу с ней позже. Используйте реальную ссылку на рабочую страницу, затем добавьте событие onlick, чтобы улучшить презентацию.

Вот образец. Home / ChangePicture - это рабочая ссылка на форму на странице с пользовательским интерфейсом и стандартными кнопками отправки в формате HTML, но она выглядит лучше, введенная в модальное диалоговое окно с кнопками jQueryUI. В зависимости от браузера работает любой из этих способов, который удовлетворяет требованиям мобильной разработки.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>

С точки зрения SEO я бы предпочел этот путь. Использование как можно большего количества дружественных URL-адресов определенно улучшит коэффициент полезности страницы.
Четабахана
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.