javascript:void(0) будет устаревать в будущем, поэтому вам следует использовать #.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 пример вышеупомянутого.

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

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

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

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

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

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

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

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

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

Пример:

<a>previous</a>

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

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

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

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

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

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

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

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

вместо

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

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

Если ваша «ссылка» имеет единственную цель - запустить некоторый код 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>

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

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

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

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

См. Здесь https://coderhelper.com/a/45465728/2803344

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

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

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

Выполнение <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 приведет к тому, что Internet Explorer 6 и Internet Explorer 7 <222398 Вот почему мы добавили простую прокладку JavaScript, чтобы выполнить это через a.hover. Что совершенно нормально, так как если у вас нет атрибута href и постепенного ухудшения, ваша ссылка все равно не будет работать - и у вас будут большие проблемы, о которых нужно беспокоиться.

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

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

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

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

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

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

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

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

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

Я использую 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)"

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

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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

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

Я обычно выбираю

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

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

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

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

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

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

Вы можете использовать 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

});

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

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

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

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

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

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

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

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

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

Затем в 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, например всплывающее окно или раскрытие содержимого.

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

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

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

Разметка тега привязки будет иметь вид

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

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

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

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

Причины :

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

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

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

Что ни к чему не приведет.

Дополнительно

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

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

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

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

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

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

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

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

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

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

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

B) Я использую 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) {

Как я понял из ваших слов, вы хотите создать ссылку только для запуска кода 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 для определения типа языка сценариев, который будет использоваться. Если не появится другой хороший язык сценариев, JavaScript также будет использоваться Internet Explorer по умолчанию, но если другой язык сценариев используется 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>')
});

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

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

В полном соответствии с общим мнением, используйте 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 на стороне сервера.

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

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

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

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

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

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

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

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

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

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

Ни то, ни другое.

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

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

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

Оформить заказ Ненавязчивый JavaScript и Прогрессивное улучшение <2572453540> Wik2443540>

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

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

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

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

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

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

В идеале вы должны сделать это:

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

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

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

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

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

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

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