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

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

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

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

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

Ни один.

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

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

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

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

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

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

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

Приятно иметь доступ к вашему сайту для пользователей с отключенным JavaScript, и в этом случае href указывает на страницу, которая выполняет то же действие, что и выполняемый JavaScript. В противном случае я использую «#» с «return false;», чтобы предотвратить действие по умолчанию (прокрутить до верхней части страницы), как упоминали другие.

Поиск в Google по запросу "javascript:void(0)" дает много информации по этой теме. Некоторые из них, например Вот этот, упоминают причины НЕ используйте void (0).

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

Если это не имеет смысла, используйте # в качестве атрибута href. Мне не нравится использовать атрибут onclick, поскольку он встраивает JavaScript непосредственно в HTML. Лучше было бы использовать внешний JS-файл, а затем добавить обработчик событий к этой ссылке. Затем вы можете предотвратить событие по умолчанию, чтобы URL-адрес не изменился для добавления # после того, как пользователь щелкнет его.

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

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

Пример:

function callFunction() { console.info("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>

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

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

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

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

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

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

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

Если вы используете ссылку как способ только выполнить некоторый код JavaScript (вместо использования диапазона, подобного D4V360), просто выполните:

<a href = "javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Если вы используете ссылку с onclick для навигации, не используйте href = "#" в качестве запасного варианта, когда JavaScript отключен. Обычно это очень раздражает, когда пользователь нажимает на ссылку. Вместо этого предоставьте ту же ссылку, которую предоставит обработчик onclick, если это возможно. Если вы не можете этого сделать, пропустите onclick и просто используйте URI JavaScript в href.

Пользуюсь javascript:void(0).

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

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

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

Вторая причина, по которой следует избегать #, заключается в том, что последний 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)"

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

Если вы используете элемент <a>, просто используйте это:

<a href = "javascript:myJSFunc();" />myLink</a>

Лично я бы позже прикрепил обработчик событий с помощью JavaScript (используя attachEvent или addEventListener или, может быть, также <поместите сюда свой любимый JavaScript-фреймворк>).

Я согласен с предложениями в другом месте, в которых говорится, что вы должны использовать обычный 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.

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

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

Обычно у вас всегда должна быть резервная ссылка, чтобы убедиться, что клиенты с отключенным 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 будут просматривать ваши расширенные функции.

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

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

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

Разметка тега привязки будет похожа на

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

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

Просто чтобы поднять то, о чем говорили некоторые другие.

Намного лучше связать событие onload'a или $ ('document'). Ready {}; затем поместить JavaScript непосредственно в событие щелчка.

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

Так как он у меня есть, вот несколько jQuery, которые могут помочь:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

Вы также можете написать подсказку в якоре следующим образом:

<a href = "javascript:void('open popup image')" onclick = "return f()">...</a>

чтобы пользователь знал, что делает эта ссылка.

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

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

вместо

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

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

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

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

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

# лучше, чем 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.

В полном согласии с общим мнением используйте void(0), когда он вам нужен, и действительный URL-адрес, когда он вам нужен.

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

<a href = "./Readable/Text/URL/Pointing/To/Server-Side/Script" id = "theLinkId">WhyClickHere</a>

На стороне сервера вам просто нужно проанализировать URL-адрес и строку запроса и сделать то, что вы хотите. Если вы сообразительны, вы можете позволить сценарию на стороне сервера по-разному реагировать как на Ajax, так и на стандартные запросы. Позволяет иметь краткий централизованный код, обрабатывающий все ссылки на вашей странице.

Учебники по перезаписи URL

Плюсы

• Отображается в строке состояния
• Легко обновляется до Ajax через обработчик onclick в JavaScript
• Практически сам комментирует
• Предотвращает засорение ваших каталогов одноразовыми HTML-файлами

Минусы

• Следует по-прежнему использовать event.preventDefault () в JavaScript
• Довольно сложная обработка пути и парсинг URL на стороне сервера.

Я уверен, что есть еще масса минусов. Не стесняйтесь их обсуждать.

Здесь нужно помнить еще об одном важном моменте. Соответствие Раздел 508.. Из-за этого я считаю необходимым указать, что вам нужен тег привязки для программ чтения с экрана, таких как Челюсти, чтобы иметь возможность фокусировать его с помощью табуляции. Так что решение «просто используйте JavaScript и забудьте для начала привязку» для некоторых из них не подходит. Запуск JavaScript внутри href необходим только в том случае, если вы не можете позволить экрану вернуться наверх. Вы можете использовать settimeout на 0 секунд и активировать JavaScript там, где вам нужен фокус, но даже страница будет прыгать наверх, а затем обратно.

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

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

Я настоятельно предпочитаю, чтобы мой JavaScript не попадал в разметку HTML, насколько это возможно. Если я использую <a> в качестве обработчика событий щелчка, я бы рекомендовал использовать <a class = "trigger" href = "#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Очень важно отметить, что многие разработчики считают, что использование тегов привязки для обработчиков событий щелчка нецелесообразно. Они предпочли бы, чтобы вы использовали <span> или <div> с некоторым CSS, который добавляет к нему cursor: pointer;. Это предмет многочисленных споров.

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

Использование дружественных маршрутов URL-адресов SEO в вашем приложении, таких как / 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>

Из ваших слов я понял, что вы хотите создать ссылку только для запуска кода JavaScript.

Тогда вы должны учитывать, что есть люди, которые блокируют JavaScript в своих браузерах.

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

По этой причине ни один из них не годится, когда JavaScript отключен.

A и если JavaScript включен, и вы хотите использовать эту ссылку только для вызова функции JavaScript, тогда

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

намного лучше, чем использование

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

потому что href = "#" заставит страницу выполнять действия, которые не нужны.

Кроме того, еще одна причина, по которой <a href = "javascript:void(0)" onclick = "myJsFunc();">Link</a> лучше, чем <a href = "#" onclick = "myJsFunc();">Link</a>, заключается в том, что JavaScript используется в качестве языка сценариев по умолчанию для большинства браузеров. Например, Internet Explorer использует атрибут onclick для определения типа языка сценариев, который будет использоваться. Если не появится другой хороший язык сценариев, Internet Explorer также будет использовать JavaScript по умолчанию, но если другой язык сценариев использует javascript:, это позволит Internet Explorer понять, какой язык сценариев используется.

Учитывая это, я бы предпочел использовать и тренироваться на

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

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

$(document).ready(function(){
    $(".blabla").append('<a href = "javascript:void(0)" onclick = "myJsFunc();">Link</a>')
});

Я честно не предлагаю ни то, ни другое. Для этого я бы использовал стилизованный <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. Я также предлагаю привязку через скрипт, не используя атрибут onclick в теге элемента. Единственная проблема - это текстовый эффект psuedo 3d в старых IE, который нельзя отключить.

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

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

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

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

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

Причины:

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

Использование <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>

Пример Backbone.js в черном ящике

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

Ноты

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

• Отсутствие атрибута href в элементе a приведет к тому, что Интернет-технологии и Интернет-технологии не будут использовать стиль a:hover, поэтому мы добавили простую прокладку JavaScript, чтобы выполнить это через a.hover. Что совершенно нормально, ведь если у вас нет атрибута href и постепенной деградации, ваша ссылка все равно не будет работать - и у вас возникнут более серьезные проблемы, о которых нужно беспокоиться.

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

Вот еще один вариант для полноты, который не позволяет ссылке что-либо делать, даже если JavaScript отключен, и он короткий :)

<a href = "#void" onclick = "myJsFunc()">Run JavaScript function</a>

Если идентификатор отсутствует на странице, ссылка не будет делать ничего.

Как правило, я согласен с ответом Аарона Вагнера, ссылка JavaScript должна быть вставлена ​​с кодом JavaScript в документ.

Я вижу много ответов от людей, которые хотят продолжать использовать значения # для href, поэтому вот ответ, который, надеюсь, удовлетворит оба лагеря:

А) Я счастлив иметь javascript:void(0) в качестве значения href:

<a href = "javascript:void(0)" onclick = "someFunc.call(this)">Link Text</a>

Б) Я использую jQuery и хочу, чтобы # был моим значением href:

<a href = "#" onclick = "someFunc.call(this)">Link Text</a>

<script type = "text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href = "#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Обратите внимание: если вы знаете, что ссылки не будут создаваться динамически, используйте вместо этого функцию click:

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

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

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

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

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

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

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

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

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

Вы можете использовать href и удалить все ссылки, в которых есть только хеши:

HTML:

<a href = "#" onclick = "run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

Вы не следует использовать встроили onclick = "something();" в свой HTML, чтобы не засорять его бессмысленным кодом; все привязки кликов должны быть установлены в файлах Javascript (* .js).

Установите привязку так: $('#myAnchor').click(function(){... **return false**;}); или $('#myAnchor').bind('click', function(){... **return false**;});

Тогда у вас есть чистый HTML-файл, который легко загружать (и оптимизировать поисковую оптимизацию) без тысяч href = "javascript:void(0);" и просто href = "#".

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

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

Которая ни к чему не приведет.

Кроме того

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

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

<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 /> для выполнения каких-либо действий или любого другого элемента, такого как b, span или того, что подходит вам в соответствии с вашими потребностями, потому что вам разрешено добавлять события ко всем элементам.

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

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

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

Я использую href = "#" для ссылок, для которых я хочу фиктивное поведение. Затем я использую этот код:

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

Это означает, что если href равен хешу (* = "#"), он предотвращает поведение ссылки по умолчанию, тем самым по-прежнему позволяя вам писать для нее функции, и это не влияет на щелчки привязки.

Я бы сказал, что лучший способ - привязать href к идентификатору, который вы никогда не будете использовать, например # Do1Not2Use3This4Id5 или аналогичному идентификатору, который вы на 100% уверены, что никто не будет использовать и не обидит людей.

1. Javascript:void(0) - плохая идея и нарушает политику безопасности контента на HTTPS-страницах с поддержкой CSP https://developer.mozilla.org/en/docs/Security/CSP (спасибо @ jakub.g)
2. Использование только # заставит пользователя вернуться наверх при нажатии
3. Не испортит страницу, если JavaScript не включен (если у вас нет кода обнаружения JavaScript.
4. Если включен JavaScript, вы можете отключить событие по умолчанию.
5. Вы должны использовать href, если не знаете, как запретить браузеру выбирать какой-либо текст (не знаю, удалит ли использование 4 то, что мешает браузеру выбирать текст)

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

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

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.

Почему бы не использовать это? Это не прокручивает страницу вверх.

<span role = "button" onclick = "myJsFunc();">Run JavaScript Code</span>

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

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

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

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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

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

На современном веб-сайте следует избегать использования href, если элемент выполняет только функции JavaScript (а не настоящую ссылку).

Почему? Наличие этого элемента сообщает браузеру, что это ссылка с местом назначения. При этом браузер покажет функцию «Открыть в новой вкладке / окне» (также срабатывает, когда вы используете Shift + щелчок). Это приведет к открытию той же страницы без срабатывания нужной функции (что приведет к разочарованию пользователя).

Что касается IE: Начиная с IE8, стили элементов (включая наведение курсора) работают, если задан doctype. О других версиях IE больше не о чем беспокоиться.

Единственный недостаток: Удаление HREF удаляет tabindex. Чтобы преодолеть это, вы можете использовать кнопку, стилизованную под ссылку, или добавить атрибут tabindex с помощью JS.

Модальные окна начальной загрузки до 4.0 имеют в основном недокументированное поведение, заключающееся в том, что они загружают href из элементов a с помощью AJAX, если только они не соответствуют #. Если вы используете Bootstrap 3, javascript:void(0); hrefs вызовет ошибки javascript:

AJAX Error: error GET javascript:void(0);

В этих случаях вам нужно будет перейти на bootstrap 4 или изменить href.

Отредактировано в январе 2019 г.

В HTML5 использование элемента a без атрибута href - это действительный. Считается "гиперссылка-заполнитель"

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

Пример:

<a>previous</a>

Если после этого вы захотите поступить иначе:

1 - Если ваша ссылка никуда не ведет, не используйте элемент <a>. Используйте <span> или что-то еще подходящее и добавьте CSS :hover, чтобы стилизовать его по своему усмотрению.

2 - Используйте javascript:void(0) ИЛИ javascript:undefined ИЛИ javascript:;, если вы хотите быть сырым, точным и быстрым.

• Javascript: void(0); недействителен до нулевого значения [Не назначен], что означает, что ваш браузер перейдет к NULL, щелкните по ДОМ, а окно вернется к false. • '#' не соответствует DOM или Window в javascript. что означает, что знак '#' внутри привязки href - это СВЯЗЬ. Ссылка на то же текущее направление.

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

function helloFunction() {
    alert("hello world");
}
<a href = "javascript:void(0)" onclick = "helloFunction();">Call Hello Function</a>

Самый простой и обычно используемый всеми - javascript: void (0). Вы можете использовать его вместо #, чтобы остановить перенаправление тега в раздел заголовка.

<a href = "javascript:void(0)" onclick = "testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}

На самом деле здесь есть четыре варианта.

Использование return false; позволяет вам сохранить версию привязки в тех случаях, когда вам нужен безопасный «запасной вариант» в браузерах с JavaScript отключен или он не поддерживается в пользовательском агенте (сейчас 1-5% пользователей). Вы можете использовать знак привязки «#», пустую строку или специальный URL-адрес для hrefесли ваш скрипт не сработает. Обратите внимание, что вы должны использовать href, чтобы программы чтения с экрана знали, что это гиперссылка. (Примечание: я не собираюсь вдаваться в аргументы об удалении атрибута href, поскольку этот вопрос здесь спорный. Без href на якоре якорь больше не является гиперссылкой, а просто тегом html с событием щелчка на нем захвачен.)

<a href = "" onclick = "alert('hello world!');return false;">My Link</a>
<a href = "#" onclick = "alert('hello world!');return false;">My Link</a>
<a href = "MyFallbackURL.html" onclick = "alert('hello world!');return false;">My Link</a>

Ниже представлен наиболее популярный сегодня дизайн, использующий javascript:void(0) внутри атрибута href. Если браузер не поддерживает сценарии, он должен снова отправить сообщение обратно на свою страницу, поскольку для пути гиперссылки href возвращается пустая строка. Используйте это, если вам все равно, кто поддерживает JavaScript.

<a href = "javascript:void(0);" onclick = "alert('hello world!');">My Link</a>