it-swarm.com.ru

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

Ниже приведены два метода создания ссылки, единственной целью которой является запуск кода 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>
3885
2cBGj7vsfp

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

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

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

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

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

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

onclick="someFunc.call(this)"

OR

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

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

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

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

OR

Используйте href="javascript:void(0)"

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

2101
AnthonyWJones

Ни.

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

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

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

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

1262
Aaron Wagner

Делать <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

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

758
balupton

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

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

304
Adam Tuttle

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

245
Tracker1

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

137
Zach

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

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

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

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

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

95
Steve Paulo

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

76
Spammer Joe

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

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

вместо

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

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

53
Fczbkk

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

50
Justin Johnson

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

38
Simon Forrest

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

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

37
phyzome

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

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

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

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

35
Free Consulting

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

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

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

30
dnetix

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

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

Причины:

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

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

25
user564706

Таким образом, когда вы выполняете некоторые вещи JavaScript с тегом <a /> и если вы также добавили href="#", вы можете добавить вернуть 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>, вы получаете преимущество: вам не нужно делать это.

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

23
Ashish Kumar

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

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

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

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

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

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

22
naveen

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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
22
Garrett

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

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

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

К тому же

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

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

19
Andrew Moore

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

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

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

18
achairapart

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

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

16
Clever Human

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

16
user6460587

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

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

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

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

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

16
Will Read

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

Затем в 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
Stacks on Stacks on Stacks

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

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

13
mdesdev

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

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

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

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

11
Lukom

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

11
Anders M.

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

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

10
mmacaulay

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

9
dazbradbury

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

9
rcof

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

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

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

9
Vinny Fonseca

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

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

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

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

А если 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>')
});
8
Berker Yüceer

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

});
8
vol7ron

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

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

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

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

7
Peter

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

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

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

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

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

Pros

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

Cons

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

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

7
user394888

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

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

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

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

7
TomDK

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

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

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

7
Pablo Cabrera

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

7
nathaniel

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

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

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

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

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

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

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

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

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

6
Shadow2531

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

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

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

6
Jesse Atkinson

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

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

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

6
G. Ghez

Javascript: void(0); не имеет значения null [Не назначено], что означает, что ваш браузер собирается NULL нажать DOM, и окно вернется к значению false.
'#' не соответствует DOM или окну в javascript. это означает, что знак '#' внутри ссылки на ссылку является ССЫЛКА. Ссылка на то же текущее направление.

3
SchoolforDesign

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

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

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

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

3
Timo Huovinen

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

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

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

Пример:

<a>previous</a>

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

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

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

2
Lyes CHIOUKH

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

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

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

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

function testFunction() {
    alert("hello world");
}
0
Dev pokhariya