Питання Яку величину "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>


3677


походження


Якщо я не пройду щось <a href="javascript:void(0)" onclick="myJsFunc();"> зовсім не має сенсу. Якщо ви повинен використовувати javascript: psuedo-протокол, вам це не потрібно onclick атрибут також. <a href="javascript:myJsFunc();"> буде добре. - Wesley Murch
@WesleyMurch - Якщо myJsFunc() має повернення значення, ваша сторінка буде перервана. jsfiddle.net/jAd9G  Ви все одно доведеться використовувати void подобається так: <a href="javascript:void myJsFunc();">. Але тоді поведінка все одно відрізнятиметься. Виклик посилання через контекстне меню не викликає click подія - gilly3
Чому не просто <a href="javascript:;" onclick="myEvent()"? - 3k-
javascript:; набагато швидше набирати ніж javascript:void(0) - Mike Causer
Перша думка, коли дивишся на це: "чому б ви використали" <a> якщо те, що ви хочете зробити, це НЕ відкрити іншу сторінку за допомогою власної функції веб-переглядача, а скоріше мати певну функцію javascript для активації? просто використовуючи a span тег з класом js-trigger напевно, набагато краще ". Або я щось не вистачає? - Adrien Be


Відповіді:


я використовую 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)"

Другий, напевно, набагато простіше спілкуватися.


2009



Я завжди відкриваю всі посилання на новій вкладці, і це є причиною того, чому я особисто ненавиджу це, коли люди використовують його href="javascript:void(0)" метод - Timo Huovinen
На жаль, не погоджуюсь, чому ця відповідь має стільки зворотних зв'язків? Будь-яке використання javascript: слід вважати поганою практикою, нав'язливою і не витонченою. - Lankymart
Наступні два відповіді набагато кращі та розумніші, ніж цей. Також перші два аргументи недійсні, оскільки event.preventDefault() чи точно, щоб запобігти поведінці за замовчуванням (наприклад, стрибати у верхній частині сторінки в даному випадку) і зробити кращу роботу на ньому без всієї return false; божевілля - sudee
Швидкий перехід до 2013 року: javascript:void(0) порушує Політика безпеки контенту на сторінках HTTPS з підтримкою CSP. Одним з варіантів було б тоді використовувати href='#' і event.preventDefault() в обробнику, але мені це не дуже подобається. Можливо, ви можете встановити конвенцію для використання href='#void' і переконайтеся, що на ній немає елементів id="void". Таким чином, натискання посилання на неіснуючий якоря не буде прокручувати сторінку. - jakub.g
Ви можете використовувати "#", а потім приєднати подію кліків до всіх посилань з "#" як href. Це буде зроблено в jQuery за допомогою: $('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; }); - Nathan


Ні.

Якщо ви можете мати фактичну URL-адресу, яка має сенс використовувати її як HREF. Onclick не спрацьовує, якщо хтось клацає по вашій посиланням, щоб відкрити нову вкладку або вимкнути JavaScript.

Якщо це неможливо, ви повинні принаймні ввести тег прив'язки в документ за допомогою JavaScript та відповідних обробників кліків.

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

Перевірити Непомітний JavaScript і Прогресивне посилення (обидві Вікіпедії).


1201



Чи можете ви навести приклад того, як можна "ввести тег прив'язки в документ за допомогою JavaScript та відповідних обробників кліків"? - user456584
Чому вставляти якоря тег взагалі, якщо він призначений лише для того, щоб елемент був натиснутий b) показати курсор "покажчик". Цього сценарію, здається, не має сенсу навіть вводити ярлик. - crush
+1 для ніхто, але є підходи. Факт залишається використанням обох javascript: або # це як погана практика, так і не заохочуватися. Красиві статті до речі. - Lankymart
@ crrush: Я б також не використовувати div або span; чесно кажучи, це, здається, саме таке <button> був зроблений для. Але погодилися: це, мабуть, не повинно бути конкретно <a> якщо немає підходящого місця для його зв'язку. - cHao
@cHao Button, мабуть, найкращий вибір. Я вважаю, що головним є те, що елемент HTML не слід вибирати, виходячи з вигляду презентації за умовчанням, а скоріше за його значенням для структури документа. - crush


Робити <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, які вимагають розбиття вашої логіки на blackboxed компоненти та шаблони. Детальніше про це в Росії Велика 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 щоб не взяти на себе a:hover стиль, тому ми додали простий JavaScript-інтервал, щоб виконати це через a.hover замість цього. Який ідеально, як ніби ви не маєте атрибуту href і не має витонченої деградації, тоді ваша посилання не буде працювати в будь-якому випадку - і у вас буде більші проблеми, про які потрібно турбуватися.

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


735



Будьте обережні, залишаючи атрибути href не сумісні з крос-браузером, і ви втратите такі речі, як ефекти зависання в Internet Explorer - Thomas Davis
Я, як правило, погоджуюсь з цією відповіддю, але є ще одне питання, яке виникає внаслідок пропуску атрибута href. У багатьох браузерах, якщо ви натискаєте посилання декілька разів дуже швидко, він фактично вибере текст на сторінці. Встановлення href вирішує ту конкретну проблему, яку нелегко виправити за іншим способом. - Christopher Camps
Остерігайтеся: стиль посилання button Підхід, запропонований тут, страждає невідворотний "3d" активний стан в IE9 і нижче. - Brennan Roberts
Я вважаю цю відповідь надмірно догматичною. Є моменти, коли ви просто хочете застосувати поведінку JS до 1 або 2 href. У цьому випадку надмірна задача визначити додатковий CSS та ввести цілі функції JS. У деяких випадках (наприклад, додавання вмісту через CMS) ви насправді не маєте дозволено щоб ввести новий CSS або автономний JS, а вбудований - це все, що ви можете зробити. Я не бачу, як вбудоване рішення є менш ретельним на практиці для 1 або 2 простих JS href's. Завжди будьте підозрілими в широких загальних заявах про погану практику, в тому числі про це. :) - Jordan Rieger
З усіма тими "зауваженнями", які важко вирішити (встановлення табулятора вимагає проблем на складній сторінці!). Набагато краще просто зробити javascript:void(0). Це прагматична відповідь, і єдина розумна відповідь у реальному світі. - Abhi Beckert


'#' поверне користувачу назад у верхню частину сторінки, тому я зазвичай їду void(0).

javascript:; також поводиться як javascript:void(0);


281



Спосіб уникнути цього - повернути помилку в обробнику подій onclick. - Guvante
Повернення помилкою в обробнику події не уникає, якщо JavaScript JS не працює успішно. - Quentin
Використання "#someNonExistantAnchorName" добре працює, тому що нема чого перейти. - scunliffe
Якщо у вас є база href, тоді # або #something візьме вас на цей якоря на базі href сторінка, а не на поточній сторінці. - Abhi Beckert
Шебанг (#!) це трюк, але це, безумовно, погана практика. - Neel


Я б чесно не рекомендував ні. Я б використав стилізований <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 атрибут на тег елемента. Єдиний вміст - це 3D-текстовий ефект psuedo у старих IE, який не може бути відключений.


Якщо ви ПОВИНЕН використовувати елемент A, використовувати javascript:void(0); з причин, про які вже згадувалося.

  • Буде завжди перехоплювати, якщо ваш подія onclick не вдасться.
  • Не буде викликати випадкові виклики навантаження або викликати інші події на основі зміни хешу
  • Тег хешу може призвести до несподіваної поведінки, якщо клік падає (натискання клацанням), уникати його, якщо це не є правильним поведінкою падіння, і ви хочете змінити історію навігації.

ПРИМІТКА. Ви можете замінити 0 з таким рядком, як javascript:void('Delete record 123') який може слугувати додатковим показником, який покаже, що фактично буде здійснено кліком.


209



У IE8 / IE9 я не можу видалити зміщення 1px "3D" в кнопці: активний стан. - Brennan Roberts
@BrennanRoberts Так, на жаль, будь-який стиль кнопок є більш проблематичним для IE ... Я все ще відчуваю, що це, мабуть, найбільш відповідний підхід, а не те, що я не порушую мої власні правила. - Tracker1
Тоді не використовуйте <button> але ан input type=button замість цього? - Patrik Affentranger
Тоді використовуйте a <clickable> елемент Або а <clickabletim> якщо ви віддаєте перевагу. На жаль, використання нестандартного тегу або простого розділу може ускладнити кластери користувачів для фокусування елемента. - joeytwiddle
Ця відповідь повинна бути вгорі. Якщо у вас є така дилема, швидше за все, ви насправді потребуєте a button. На жаль, IE9 швидко втрачає частку ринку, і активний ефект 1px не повинен перешкоджати нам використовувати семантичну розмітку. <a> це посилання, він призначений для того, щоб відправити вас десь за дії, які ми маємо <button>с. - mjsarfatti


Перший, в ідеалі, з реальним посиланням слідувати, якщо користувач вимкнув JavaScript. Просто переконайтеся, що повернуте false, щоб запобігти появі кліків після стрільби, якщо JavaScript виконує.

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

Якщо ви використовуєте Angular2, то це працює:

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

Дивіться тут https://stackoverflow.com/a/45465728/2803344


128



Отже, в агентах користувача з підтримкою JavaScript та підтримуваною функцією запускається функція JavaScript, яка відступає (для агенцій користувача, де JS не вдається з якоїсь причини), до посилання на вершину сторінки? Це рідко доцільне відставання. - Quentin
"в ідеалі з реальним посиланням, щоб слідувати у випадку, якщо користувач має відключений JavaScript", він повинен йти на корисну сторінку, а не #, навіть якщо це лише пояснення того, що сайт потребує JS для роботи. як і в разі невдачі, я очікую, що розробник, перш ніж розгортати, використовуватиме належне визначення функцій браузера тощо. - Zach
Я б припустив (сподіваюсь), що щось подібне буде лише для показу спливаючих вікон або чогось подібного простого. У цьому випадку за замовчуванням з'явиться URL-адреса спливаючої сторінки. Якщо це частина веб-додатки або інвалідність JS повністю зламає сторінку, то цей код має інші проблеми ... - Brian Moeskau
Мої веб-додатки розроблені, щоб делікатніше, тому посилання все одно буде корисною сторінкою. Якщо ваш веб-програма не є чат-клієнтом чи іншим інтерактивним, це має працювати, якщо ви вставите час до розробки з урахуванням деградації. - Zach
Проблема полягає в тому, якщо myJsFunc видає помилку, вона не буде захоплена для повернення помилково. - Tracker1


В ідеалі, ви зробите це:

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

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


90





Ні, якщо ти питаєш мене;

Якщо ваша "посилання" має єдину мету запускати який-небудь код JavaScript, вона не вважається посиланням; скоріше, фрагмент тексту з функцією JavaScript, пов'язаний з ним. Я б рекомендував використовувати a <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>


86



Цей підхід обмежує "посилання" на операцію "миша". Якоря можна відвідати через клавіатуру, і подія "onclick" звільняється при натисканні клавіші введення. - AnthonyWJones
Кольорова кодування кольорів у вашому CSS не дозволить браузеру використовувати користувацькі кольори, які може визначити користувач, що може бути проблемою доступу. - Hosam Aly
<span>S не мають на увазі робити нічого <A>nchors і <buttons> використовуються для цього! - redShadow
Використовуючи buttons це кращий вибір тут при використанні а span не. - apnerve
Я думаю, що прольоти краще, ніж ярлик. Тег прив'язки існує, щоб спрямувати вас до обов'язкового атрибуту href. Якщо ви не збираєтеся використовувати href, не використовуйте якоря. Це не обмежує посилання на мишу лише тому, що це не посилання. Вона не має href. Це більше схожа на кнопку, але вона не публікує. Пропускна здатність, яка не має наміру нічого робити, абсолютно недійсна. Розглянемо спадне меню, яке активується під час навігації. Це, ймовірно, комбінація прольотів і відмінностей, виконуючи функцію кнопки, яка розширює область на екрані. - NibblyPig


Використання просто # робить деякі кумедні рухи, тому я б рекомендував використовувати #self якщо ви хочете заощадити на типізації зусиль JavaScript bla, bla,.


73



WOW, великі пальці для цього наконечника. Ніколи не знав, що ви можете використовувати #self для іменованих тегів, а також уникнути дратує поведінку браузера, що стрибає вгору сторінки. Дякую. - alonso.torres
Для довідки #self не є особливим. Будь-який ідентифікатор фрагмента, який не збігається з ім'ям або ідентифікатором будь-якого елемента документа (і не є порожнім або "зверху"), повинен мати такий самий ефект. - cHao
Я зазвичай просто використовую назву якоря, але я думаю, що я почну робити це, щоб бути послідовним у всій моїй роботі. - Douglas.Sesar
Я запропонував встановити #void конвенція в іншому коментарі, але насправді #self як короткий і легко запам'ятовуватись. Щось краще ніж # - jakub.g
Але якщо ви клацнете по такому посиланню, то це буде дивним для користувача, щоб побачити "#void" у url, виглядає як і помилка або помилка, так само з #self або будь-що іншим. - pmirnd


Я використовую наступне

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

замість цього

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

55



я використовую javascript: (без напівпрядів), оскільки він виглядає найсміливішим у рядку стану на наведенні курсору. - Boann
Цей код може призвести до неприємних сюрпризів у старих IE. В якийсь момент він використовував для вилучення будь-яких ефектів анімації з зображеннями, включаючи переміщення та навіть анімацію gifs: groups.google.com/forum/#!topic/comp.lang.javascript/... - Ilya Streltsyn
Ви завжди можете зробити ... javascript:void('Do foo') оскільки void повернеться невизначеною незалежно, він дасть користувачу індикатор, який натискає. Де Do foo може бути Delete record X або що завгодно. - Tracker1