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

avatar
Peter Mortensen
25 сентября 2008 в 17:54
2385436
55
4241

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

Ответы (55)

avatar
27 июня 2021 в 10:17
0

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

avatar
Stokely
1 марта 2021 в 19:19
1

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

Использование 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>
avatar
treat your mods well
29 ноября 2019 в 08:14
58

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

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

Dandev
5 июля 2021 в 08:43
0

это зависит от того, нужна ли вам кнопка на вашем bem (модель блочного элемента) html.

avatar
14 июня 2019 в 11:37
9

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

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

function testFunction() {
    alert("hello world");
}
Dandev
5 июля 2021 в 08:45
0

если вы используете версию, которая требует обнаружения javascript и использования функции для определения версии браузера, вы можете вместо этого использовать # `` <a href="javascript: void (0)" onclick = "testFunction ();"> Нажмите, чтобы проверить </ a > function testFunction () {alert ("привет, мир")} `` `

avatar
29 мая 2019 в 04:49
2

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

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
avatar
14 мая 2019 в 13:40
3

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

avatar
djpalme
6 февраля 2019 в 01:32
13

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

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

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

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

avatar
mdesdev
24 января 2019 в 23:25
17

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

HTML

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

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

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

или

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

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

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

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

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

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

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

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

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

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

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

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

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

avatar
Matt Goddard
24 января 2019 в 23:24
9

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

Намного лучше связать событие 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]);
Matt Kantor
22 июля 2009 в 13:43
0

LowPro действительно хорош для ненавязчивого JS, если у вас много сложного поведения.

avatar
Lyes CHIOUKH
23 января 2019 в 16:36
7

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

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

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

Пример:

<a>previous</a>

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

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

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

avatar
Peter Mortensen
15 августа 2018 в 09:38
14

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

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

AnthonyWJones
26 сентября 2008 в 07:20
1

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

Peter Mortensen
31 мая 2011 в 08:06
2

Ссылка (фактически) разорвана.

Hrvoje Golcic
26 ноября 2019 в 15:13
1

Не лучшее решение для доступности: dequeuniversity.com/rules/axe/3.0/href-no-hash

Scott Schupbach
7 апреля 2020 в 18:59
0

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

avatar
user564706
9 августа 2018 в 11:16
27

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

avatar
se_pavel
9 августа 2018 в 11:14
71

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

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

вместо

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
Sebastian Simon
29 мая 2021 в 01:10
0

href="javascript:" и href="javascript:void 0;" тоже эквивалентны, но все они одинаково плохи.

avatar
Tracker1
6 мая 2018 в 20:40
300

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

mjsarfatti
14 марта 2016 в 15:00
35

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

avatar
fijter
5 ноября 2017 в 13:52
109

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

Если ваша «ссылка» имеет единственную цель - запустить некоторый код 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>
AnthonyWJones
26 сентября 2008 в 07:09
132

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

Hosam Aly
28 февраля 2009 в 19:21
43

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

redShadow
14 декабря 2011 в 23:15
33

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

apnerve
28 декабря 2012 в 08:33
25

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

Sebastian Simon
29 мая 2021 в 01:04
0

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

avatar
Belter
12 октября 2017 в 12:00
147

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

Quentin
26 сентября 2008 в 08:09
20

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

Zach
26 сентября 2008 в 15:41
23

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

avatar
4 октября 2017 в 19:47
-2

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

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

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

avatar
balupton
23 мая 2017 в 12:10
790

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

redanimalwar
7 февраля 2021 в 09:35
0

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

avatar
Gabe Rogan
11 мая 2017 в 04:33
349

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

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

Guvante
25 сентября 2008 в 21:22
69

Способ избежать этого - вернуть false в обработчике события onclick.

Quentin
26 сентября 2008 в 08:10
35

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

scunliffe
27 сентября 2008 в 02:46
31

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

Abhi Beckert
28 марта 2012 в 06:39
23

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

user692942
18 июля 2013 в 12:06
1

Любое использование # или void(0) является плохой практикой и не должно поощряться.

Neel
17 апреля 2014 в 00:23
13

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

Ilya Streltsyn
22 сентября 2014 в 09:18
6

@Neel, любой якорь, который фактически не существует в документе (например, #_), выполняет тот же трюк с теми же недостатками.

avatar
20 февраля 2017 в 15:46
16

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

Jochen Schultz
21 сентября 2017 в 10:58
0

На самом деле они не делают то же самое. # заставляет вас перейти в начало страницы.

avatar
Andrew Moore
20 февраля 2017 в 06:54
20

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

avatar
Free Consulting
20 февраля 2017 в 06:52
37

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

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

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

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

avatar
AnthonyWJones
20 февраля 2016 в 02:02
2227

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

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

jakub.g
1 октября 2013 в 09:21
154

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

Nathan
14 февраля 2014 в 04:58
28

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

CherryDT
15 февраля 2021 в 22:35
0

#void тем не менее добавит запись в историю браузера. Другой способ - использовать URL-адрес ресурса, который возвращает HTTP-статус 204 (и по-прежнему использовать preventDefault - 204 - это просто запасной вариант).

s3c
31 мая 2021 в 12:18
0

@Nathan Non-jquery: const voidLinks = document.querySelectorAll('a[href="#"') for (const voidLink of voidLinks) { voidLink.addEventListener('click', e => { e.preventDefault ? e.preventDefault() : e.returnValue = false }) voidLink.addEventListener('keypress', e => { if (e.keyCode === 13) e.preventDefault ? e.preventDefault() : e.returnValue = false }) } Это включает прослушиватель событий при нажатии клавиши Enter (код 13) для навигации людей по странице с помощью клавиатуры.

Nathan
1 июня 2021 в 22:01
0

@ s3c Нажатие клавиши ввода уже запускает событие щелчка, так что нужен ли последний слушатель?

s3c
2 июня 2021 в 08:08
0

@ Натан Этого не знал. Спасибо. PS: Не могу найти по нему документации, но судя по тому, что я нашел от других людей, это кажется подтвержденным. Фиксированный фрагмент: const voidLinks = document.querySelectorAll('a[href="#"') for (const voidLink of voidLinks) { voidLink.addEventListener('click', e => { e.preventDefault ? e.preventDefault() : e.returnValue = false }) }

HPWD
9 июля 2021 в 18:18
0

Я пытался найти причину ошибки Uncaught SyntaxError: Unexpected token ')' в журнале отладки. Он продолжал указывать на мой href в моем меню навигации. Я проверил функции, css, все, что мог придумать, а затем благодаря Google привел меня на эту страницу. Изменение href="javascript:void()" на href="javascript: void (0)" `, и теперь ошибок в отладке больше нет. Спасибо за четкое объяснение!

avatar
26 января 2016 в 19:54
24

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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
Quentin
15 июня 2016 в 12:12
15

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

Tsundoku
25 июля 2017 в 13:09
4

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

Useless Code
22 ноября 2017 в 11:45
2

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

avatar
Spammer Joe
10 ноября 2015 в 04:10
76

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

cHao
17 мая 2013 в 16:16
35

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

avatar
13 августа 2015 в 01:01
30

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

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

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

avatar
Clever Human
21 мая 2015 в 00:56
17

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

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

AndFisher
18 января 2017 в 14:42
0

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

avatar
18 ноября 2014 в 15:42
8

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

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
Alex Yorke
29 декабря 2014 в 20:20
0

На самом деле это кажется очень хорошим решением, спасибо. Я заменил href="#" на role="button" везде, а затем вставил *[role="button"] { cursor:pointer; } в CSS, и это, кажется, работает очень хорошо без необходимости в ненужном JS :)

Martin
14 марта 2017 в 14:18
0

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

Hrvoje Golcic
26 ноября 2019 в 15:15
0

Да, при нажатии клавиши TAB невозможно перейти к нему. Использование tabindex="0" может улучшить ситуацию, но я не уверен, что это подходящее решение

AlxGol
27 ноября 2019 в 07:43
0

Спустя 5 лет после ответа я тоже рассматриваю a11y фичи :)

Sebastian Simon
29 мая 2021 в 01:13
0

@HrvojeGolcic Обратите внимание на проблемы доступности при использовании tabindex.

avatar
vol7ron
26 октября 2014 в 14:10
8

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

});
squidbe
3 марта 2014 в 22:12
2

Это плохо, особенно в IE (до версии 10, насчет 11 не уверен). Щелчок по ссылке с пустым href приводит к запуску ненужного (и, возможно, нежелательного) запроса, а в IE он пытается открыть проводник Windows.

vol7ron
2 июня 2014 в 16:13
0

@squidbe: Это был старый ответ, но я думаю, это зависит от того, как написан ваш JS. Если бы вы не хотели, чтобы это сработало, я думаю, вы бы onclick="return run_foo()" и run_foo вернули false или просто добавили строку return false после вызова функции. Суть этого ответа заключалась в том, что вы можете удалить теги href, когда JS включен. Идеальным решением было бы заполнить href отказоустойчивой ссылкой, скорее всего, на страницу, отображаемую на стороне сервера href="render/full_page.script?arg=value" onclick="loadAJAXContent.call(this); return false"

squidbe
2 июня 2014 в 18:03
0

Вы правы насчет безотказного решения. Я хотел сказать, что значение атрибута href никогда не должно быть пустой строкой, и установка его на пустое значение может вызвать нежелательные побочные эффекты. Даже когда вы возвращаете false, если в вашем скрипте есть ошибки, нежелательный запрос и нежелательное поведение Windows все равно возникают. Если есть вариант между оставлением хеша в href и его удалением с помощью скрипта, я думаю, что лучше оставить его.

avatar
Anders M.
26 октября 2014 в 12:35
10

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

avatar
Vinny Fonseca
26 октября 2014 в 12:33
10

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

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

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

avatar
Ashish Kumar
26 октября 2014 в 12:32
25

Итак, когда вы выполняете некоторые операции 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> для этого вы получаете преимущество, вам не нужно этого делать.

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

avatar
Stacks on Stacks on Stacks
26 октября 2014 в 12:28
16

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

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

avatar
naveen
9 марта 2014 в 10:43
23

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

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

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

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

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

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

Matt Kantor
22 июля 2009 в 13:40
5

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

mtyaka
24 ноября 2009 в 10:19
0

Могу я сказать, что это вариант, которым SO решила пойти. Например, проверьте ссылки "флаг".

Nicolás
7 июля 2010 в 03:51
12

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

Scott Rippey
17 июня 2011 в 19:32
6

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

Muhd
14 декабря 2011 в 22:39
3

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

avatar
Eric Yin
22 августа 2013 в 11:37
27

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

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

Причины :

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

я не согласен с «1». потому что он дает ошибку, когда вы помещаете ссылку на сценарий ur, когда сценарии не разрешены. так что такие ссылки должны быть добавлены с кодом js. таким образом люди могут избегать этих ссылок, пока скрипт не разрешен, и вообще не видят ошибок.

avatar
whirlwin
30 июля 2013 в 10:45
19

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

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

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

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

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

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

whirlwin
30 июля 2013 в 10:46
0

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

avatar
8 февраля 2013 в 14:15
6

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

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

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

user428517
12 августа 2013 в 14:17
0

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

ryabenko-pro
22 октября 2013 в 12:55
0

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

avatar
Timo Huovinen
3 января 2013 в 07:34
3

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

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

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

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

Andy E
16 мая 2012 в 13:07
4

В HTML5 большинство ограничений на идентификаторы снято, поэтому они могут начинаться с числа. Единственные ограничения теперь заключаются в том, что они должны быть уникальными и не должны содержать пробелов. См. whatwg.org/specs/web-apps/current-work/multipage/…. Кроме того, ваше решение изменяет URL-адрес и вставляет запись в историю, загрязняя кнопку «Назад» бесполезными состояниями.

Timo Huovinen
16 мая 2012 в 13:16
3

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

avatar
dazbradbury
16 марта 2012 в 03:33
8

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

avatar
Berker Yüceer
11 марта 2012 в 10:03
8

Как я понял из ваших слов, вы хотите создать ссылку только для запуска кода 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>')
});
avatar
Josh Simerman
11 марта 2012 в 09:41
13

Я в основном перефразирую эту практическую статью, используя прогрессивное улучшение. Короткий ответ заключается в том, что вы никогда не используете 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>
Chetabahana
21 апреля 2015 в 22:18
0

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

avatar
user394888
11 марта 2012 в 09:33
7

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

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

avatar
11 марта 2012 в 09:14
11

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

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

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

avatar
Pablo Cabrera
11 марта 2012 в 09:12
7

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

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

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

Timo Huovinen
16 мая 2012 в 19:36
7

Может ли кто-нибудь объяснить причину, по которой в этом ответе так много голосов против?

David Granado
15 марта 2013 в 14:31
1

В этом ответе есть отрицательные голоса, потому что (как отмечено в другом ответе) размещение javascript в фактическом теге считается очень плохой практикой. Обработчики кликов никогда не должны быть в самом HTML. Главный ответ лучше всего объясняет это подробно.

avatar
Peter Mortensen
11 марта 2012 в 09:10
10

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

avatar
Will Read
11 марта 2012 в 08:57
17

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

Benjol
26 сентября 2008 в 12:01
3

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

avatar
Fczbkk
11 марта 2012 в 08:36
56

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

avatar
Aaron Wagner
11 марта 2012 в 08:30
1359

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

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

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

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

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

Sebastian Simon
29 мая 2021 в 00:52
5

"Если это невозможно, то" используйте вместо этого кнопку. Вот как должен закончиться этот ответ.

avatar
14 декабря 2011 в 21:06
6

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

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

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

avatar
Shadow2531
31 мая 2011 в 08:10
7

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

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

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

mplungjan
14 января 2012 в 19:24
0

Это привело бы к ошибке, если бы JS был отключен вместо того, чтобы, казалось бы, ничего не делать или просто перейти в верхнюю часть страницы.

Shadow2531
15 января 2012 в 06:07
1

@mplungjan Если JS выключен, щелчок по нему ничего не сделает, что имеет смысл, если нет альтернативного представления / действия, отличного от js, того, что делает JS. Если href будет "#" или какой-то URI, то это уже бесполезно в случае, который я описывал.

mplungjan
15 января 2012 в 10:28
0

Поэтому используйте вместо него href="jsdisabled.html"

Shadow2531
16 января 2012 в 05:52
0

@mplungjan Вы могли бы. Но это уводит от страницы.

Shadow2531
17 января 2012 в 04:09
0

@mplungjan Понятно. Вы могли бы это сделать. Никаких аргументов. Лично я бы просто имел сообщение «эта страница требует JS» для страницы, которая исчезает при включении JS.

avatar
Steve Paulo
31 мая 2011 в 08:04
104

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

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

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

avatar
23 ноября 2009 в 20:38
52

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

Ry-♦
10 апреля 2014 в 23:47
1

@Muhd: Возврат должен активировать click на ссылках…

avatar
25 сентября 2008 в 18:50
8

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

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

avatar
25 сентября 2008 в 18:02
42

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

avatar
25 сентября 2008 в 17:57
10

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