Яке значення "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>

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

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

Ні.

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

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

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

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

Робити <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>

Blackboxed 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елемент з hrefатрибутом, який спрямовується на якусь URL-адресу, яка буде виконувати дію вручну замість запиту Ajax або будь-якого іншого способу. Якщо ви робите це, то ви хочете переконатися, що ви робите під event.preventDefault()час дзвінка по клацанню, щоб переконатися, що після натискання кнопки вона не переходить за посиланням. Цей варіант називається витонченою деградацією.

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

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

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

Якщо ОБОВ'ЯЗКОВО використовувати елемент A, використовуйте його javascript:void(0);з причин, які вже були згадані.

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

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

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

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

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

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

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

Ні якщо ви запитаєте мене;

Якщо ваше "посилання" має єдину мету запускати якийсь код 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>

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

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

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

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

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

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

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

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

Я погоджуюся з пропозиціями в іншому місці, в яких зазначається, що слід використовувати звичайний 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викликається.

#краще ніж 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.

Я рекомендую <button>замість цього використовувати елемент, особливо якщо контроль повинен викликати зміну даних. (Щось на зразок пошти.)

Ще краще, якщо ви будете вводити елементи ненав’язливо, тип прогресивного вдосконалення. (Дивіться цей коментар .)

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

Однозначно хеш ( #) краще, тому що в JavaScript це псевдосхема:

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

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

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

Я зазвичай йду

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

Він коротший, ніж javascript: void (0) і робить те саме.

Я б використав:

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

Причини:

1. Це робить hrefпросто, пошукові системи цього потребують. Якщо ви використовуєте що-небудь інше (наприклад, рядок), це може спричинити 404 not foundпомилку.
2. Коли миша наводить посилання, це не показує, що це сценарій.
3. Використовуючи return false;сторінку, не перескакує на верхню частину і не порушує backкнопку.

Я вибираю використання javascript:void(0), оскільки використання цього може запобігти натискання правої кнопки миші, щоб відкрити меню вмісту. Алеjavascript:; коротше і робить те ж саме.

Отже, коли ви робите деякі <a />теги JavaScript з тегом, і якщо ви також ставите href="#", ви можете додати false 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>тег для цього, ви отримуєте перевагу, ви не ' не потрібно це робити.

Тож, якщо бачите, краще не використовувати теги для подібних речей.

Не використовуйте посилання з єдиною метою запуску JavaScript.

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

Замість цього використовуйте інший елемент, крім посилання:

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

І стилізуйте його за допомогою CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Було б краще використовувати jQuery,

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

і опустити і те, href="#"і href="javascript:void(0)".

Розмітка тегів прив’язки буде подібною

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

Досить просто!

Якщо ви використовуєте AngularJS , ви можете скористатись такими:

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

Який нічого не зробить.

На додачу

• Це не відведе вас до верхньої частини сторінки, як при (#)
  • Тому вам не потрібно явно повертатись falseіз JavaScript
• Це короткий лаконічний

Якщо немає, hrefможливо, немає підстав використовувати тег прив’язки.

Ви можете додавати події (клацання, наведення курсора тощо) майже на кожен елемент, то чому б не просто використовувати a spanчи a div?

А для користувачів з вимкненим JavaScript: якщо немає резервного резерву (наприклад, альтернатива href), вони, принаймні, не можуть бачити та взаємодіяти з цим елементом взагалі, яким би він не був <a>або <span>тегом.

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

Я особисто використовую їх у поєднанні. Наприклад:

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
});

Тоді ви можете стилізувати прольотний елемент так, щоб він виглядав як якір з невеликим CSS:

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

Ось приклад jsFiddle вищезгаданого.

Залежно від того, що ви хочете досягти, ви можете забути onclick і просто використовувати href:

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

Вона обходить необхідність повернення помилкових. Цей #варіант мені не подобається, тому що, як уже згадувалося, користувач перенесе верхню частину сторінки. Якщо ви маєте десь ще надіслати користувача, якщо він не має JavaScript (що рідко, де я працюю, але дуже хороша ідея), запропонований метод Стіва чудово працює.

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

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

Коли у мене є кілька штучних посилань, я вважаю за краще надати їм клас «без зв’язку».

Потім у jQuery я додаю такий код:

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

А для HTML посилання просто

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

Мені не подобається використовувати Hash-Tags, якщо вони не використовуються для якорів, і я роблю вищезазначене лише тоді, коли у мене більше двох штучних посилань, інакше я переходжу з javascript: void (0).

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

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

Я вважаю, ви представляєте помилкову дихотомію. Це не єдині два варіанти.

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

Я спробував обидва в Google Chrome з інструментами для розробників, і це id="#"зайняло 0,32 секунди. Тоді як javascript:void(0)метод зайняв лише 0,18 секунди. Тож у Google chrome javascript:void(0)працює краще та швидше.

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

Використання зручних для SEO маршрутів у вашій програмі, таких як / Головна / Дія / Параметри - також є хорошою практикою. Якщо у вас є посилання на сторінку, яка спочатку працює без JavaScript, ви можете покращити цю роботу після цього. Використовуйте реальне посилання на робочу сторінку, а потім додайте подію onlick для покращення презентації.

Ось зразок. Головна / 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>