Ниже приведены два метода построения ссылки, которая имеет единственную цель запуска JavaScript-кода. Что лучше, с точки зрения функциональности, скорости загрузки страницы, целей проверки и т.д.?
function myJsFunc() {
alert("myJsFunc");
}<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>
Я использую javascript:void(0).
Три причины. Поощрение использования # среди команды разработчиков неизбежно приводит к некоторому использованию возвращаемого значения функции, называемой так:
function doSomething() {
//Some code
return false;
}
Но затем они забывают использовать return doSomething() в onclick и просто использовать doSomething().
Вторая причина избегать # заключается в том, что окончательный return false; не будет выполняться, если вызываемая функция выдает ошибку. Следовательно, разработчики должны также помнить, что надлежащим образом обрабатывать любую ошибку в вызываемой функции.
Третья причина заключается в том, что бывают случаи, когда свойство события onclick назначается динамически. Я предпочитаю иметь возможность вызывать функцию или назначать ее динамически без необходимости кодирования функции специально для одного метода вложения или другого. Следовательно, my 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, было в порядке назад пять лет назад, хотя теперь это может быть плохой практикой. Вот почему:
Это способствует практике навязчивого JavaScript - что оказалось трудно поддерживать и сложно масштабировать. Подробнее об этом в Ненавязчивый JavaScript.
Вы тратите свое время на создание невероятно сложного подробного кода, который очень мало (если таковой имеется) приносит пользу вашей кодовой базе.
Теперь есть лучшие, более простые и удобные и масштабируемые способы достижения желаемого результата.
Просто не имеет атрибута href вообще! Любой хороший CSS reset будет следить за отсутствующим стилем курсора по умолчанию, так что это не проблема. Затем добавьте свои функции 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> '#' вернет пользователя в начало страницы, поэтому я обычно иду с void(0).
javascript:; также ведет себя как javascript:void(0);
Я бы честно не предлагал ни того, ни другого. Я бы использовал стилизованный <button> </button> для этого поведения.
button.link {
display: inline-block;
позиция: относительная;
background-color: transparent;
курсор: указатель;
border: 0;
заполнение: 0;
цвет: # 00f;
text-decoration: подчеркивание;
font: inherit;
}Код>
<p> Кнопка, которая выглядит как кнопка < button type = "button" class= "link" > link </кнопка >. </р >код> Первый, в идеале, с реальной ссылкой, если пользователь отключил JavaScript. Просто верните false, чтобы предотвратить событие щелчка при запуске JavaScript.
<a href="#" onclick="myJsFunc(); return false;">Link</a>
Если вы используете Angular2, этот способ работает:
<a [routerLink]="" (click)="passTheSalt()">Click me</a>.
См. здесь fooobar.com/questions/23049/...
Не спрашивайте меня,
Если ваша "ссылка" имеет единственную цель для запуска некоторого кода 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.
Ответ снят в знак протеста против руководства СО и их обращения с Моникой.
Если вы не пишете ссылку с помощью JavaScript (так, чтобы вы знали, что она включена в браузере), вы должны в идеале предоставить правильную ссылку для людей, которые просматривают с отключенным JavaScript, а затем предотвращают действие по умолчанию ссылки в обработчике событий onclick. Таким образом, функции с включенным JavaScript будут запускать эту функцию, а те, у кого отключен JavaScript, перейдут на соответствующую страницу (или местоположение на той же странице), а не просто на ссылку и ничего не произойдет.
Определенно hash (#) лучше, потому что в JavaScript это псевдосхема:
Конечно, "#" с обработчиком onclick, который предотвращает действие по умолчанию, [намного] лучше. Более того, ссылка, которая имеет единственную цель для запуска JavaScript, на самом деле не является "ссылкой", если вы не отправляете пользователя на какой-нибудь разумный якорь на странице (просто # отправит на верх), когда что-то пойдет не так. Вы можете просто имитировать внешний вид ссылки со стилем и забыть о href вообще.
Кроме того, в отношении предложения cowgod, в частности, это: ...href="javascript_required.html" onclick="... Это хороший подход, но он не различает сценарии "отключен JavaScript" и "onclick fail".
Я обычно иду за
<a href="javascript:;" onclick="yourFunction()">Link description</a>
Он короче javascript: void (0) и делает то же самое.
Я бы использовал:
<a href="#" onclick="myJsFunc();return false;">Link</a>
Причины:
href простым, поисковые системы ему нужны. Если вы используете что-либо еще (например, строку), это может привести к ошибке 404 not found.return false;, страница не переместится вверх или не сломает кнопку back. Я выбираю использовать javascript:void(0), потому что это может помешать щелчку правой кнопкой мыши, чтобы открыть меню содержимого. Но javascript:; короче и делает то же самое.
Итак, когда вы делаете некоторые вещи JavaScript с тегом <a />, и если вы также ставите href="#", вы можете добавить return false в конце события (в случае inline event binding), например:
<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Обычно у вас всегда должна быть ссылка возврата, чтобы убедиться, что у клиентов с отключенным 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 просматривают расширенные функции.
Если нет href, возможно, нет причин использовать тег привязки.
Вы можете присоединять события (щелчок, наведение и т.д.) почти на каждом элементе, поэтому почему бы просто не использовать span или div?
И для пользователей с отключенным JavaScript: если нет резервной копии (например, альтернативы href), они должны по крайней мере не иметь возможности видеть и взаимодействовать с этим элементом вообще, независимо от того, что это <a> или тега <span>.
В зависимости от того, что вы хотите выполнить, вы можете забыть 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. Он отлично работает, если у вас есть изображение, с которым вы хотите выполнить событие mouseover, но для пользователя нечего делать.
Я считаю, что вы представляете ложную дихотомию. Это не единственные два варианта.
Я согласен с г-ном D4V360, который предположил, что, хотя вы используете якорный тег, у вас действительно нет якоря здесь. Все, что у вас есть, - это специальный раздел документа, который должен вести себя немного иначе. Тег <span> гораздо более уместен.
Когда у меня есть несколько ссылок faux, я предпочитаю дать им класс "no-link".
Затем в jQuery я добавляю следующий код:
$(function(){
$('.no-link').click(function(e){
e.preventDefault();
});
});
И для HTML ссылка просто
<a href="/" class="no-link">Faux-Link</a>
Мне не нравится использовать Hash-теги, если они не используются для привязок, и я делаю только это, когда у меня есть более двух faux-ссылок, иначе я иду с javascript: void (0).
<a href="javascript:void(0)" class="no-link">Faux-Link</a>
Как правило, мне нравится просто избегать использования ссылки вообще и просто переносить что-то в промежутке и использовать это как способ для работы с некоторым кодом JavaScript, например всплывающее окно или раскрытие содержимого.
Я попробовал оба в google chrome с инструментами разработчика, а id="#" занял 0,32 секунды. В то время как метод javascript:void(0) занял всего 0,18 секунды. Итак, в google chrome javascript:void(0) работает лучше и быстрее.
Я лично использую их в сочетании. Например:
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;
}
Я в основном перефразирую эту практическую статью с использованием прогрессивного улучшения. Короткий ответ заключается в том, что вы никогда не используете javascript:void(0); или #, если ваш пользовательский интерфейс уже не определил, что JavaScript включен, и в этом случае вы должны использовать javascript:void(0);. Кроме того, не используйте span в качестве ссылок, поскольку для начала это семантически ложно.
Использование SEO дружественных URL-адресов в вашем приложении, таких как /Home/Action/Parameters, является хорошей практикой. Если у вас есть ссылка на страницу, которая работает без 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>