Я хочу запустить простую функцию JavaScript на клик без перенаправления.

Есть ли какая-либо разница или польза от помещения вызова JavaScript в hrefатрибут (например, так:

<a href="javascript:my_function();window.print();">....</a>

) против помещения его в onclickатрибут (связывание с onclickсобытием)?

Помещение onclick в href оскорбит тех, кто твердо верит в отделение контента от поведения / действия. Аргумент заключается в том, что ваш HTML-контент должен оставаться сфокусированным исключительно на контенте, а не на представлении или поведении.

Типичный путь в эти дни - использовать библиотеку javascript (например, jquery) и создать обработчик событий, используя эту библиотеку. Это будет выглядеть примерно так:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

плохой:

<a id="myLink" href="javascript:MyFunction();">link text</a>

хорошо:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

лучше:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

еще лучше 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

еще лучше 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Почему лучше? потому что return falseне позволит браузеру перейти по ссылке

Лучший:

Используйте jQuery или другую подобную инфраструктуру, чтобы прикрепить обработчик onclick по идентификатору элемента.

$('#myLink').click(function(){ MyFunction(); return false; });

С точки зрения javascript , одно отличие состоит в том, что thisключевое слово в onclickобработчике будет ссылаться на элемент DOM, onclickатрибут которого он (в данном случае на <a>элемент), тогда как thisв hrefатрибуте будет ссылаться на windowобъект.

С точки зрения представления , если hrefатрибут отсутствует в ссылке (то есть <a onclick="[...]">), то по умолчанию браузеры будут отображать textкурсор (а не часто требуемый pointerкурсор), поскольку он обрабатывает <a>как привязку, а не ссылку.

С точки зрения поведения , при указании действия с помощью навигации href, браузер обычно поддерживает открытие hrefв отдельном окне с помощью ярлыка или контекстного меню. Это невозможно при указании действия только через onclick.

Однако, если вы спрашиваете, каков наилучший способ получить динамическое действие от щелчка объекта DOM, тогда лучше всего присоединить событие, используя javascript отдельно от содержимого документа. Вы можете сделать это несколькими способами. Распространенным способом является использование библиотеки javascript, такой как jQuery, для привязки события:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

я использую

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Долгий путь, но он выполняет свою работу. используйте стиль A для упрощения, тогда он становится:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

В дополнение ко всему, href отображается в строке состояния браузера, а onclick - нет. Я думаю, что не удобно показывать там код JavaScript.

лучший способ сделать это с:

<a href="#" onclick="someFunction(e)"></a>

Проблема в том, что это добавит хеш (#) к концу URL-адреса страницы в браузере, что потребует от пользователя дважды нажать кнопку «Назад», чтобы перейти на страницу раньше вашей. Учитывая это, вам нужно добавить некоторый код, чтобы остановить распространение событий. У большинства наборов инструментов JavaScript уже есть функция для этого. Например, инструментарий Dojo использует

dojo.stopEvent(event);

сделать это.

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

Лучше всего связать обработчик событий с элементом, как заявили многие другие люди, однако он <a href="javascript:doStuff();">do stuff</a>отлично работает в любом современном браузере, и я широко использую его при рендеринге шаблонов, чтобы избежать необходимости повторной привязки для каждого экземпляра. В некоторых случаях этот подход предлагает лучшую производительность. YMMV

Еще одна интересная новость ....

onclickи hrefимеют другое поведение при вызове javascript напрямую.

onclickбудет проходить thisконтекст правильно, тогда как hrefне будет, или другими словами <a href="javascript:doStuff(this)">no context</a>, не будет работать, тогда как <a onclick="javascript:doStuff(this)">no context</a>будет.

Да я пропустил href . Хотя это не соответствует спецификации, оно будет работать во всех браузерах, хотя в идеале оно должно включать в href="javascript:void(0);"себя

имеющий javascript: любого атрибута, который не предназначен специально для сценариев, является устаревшим методом HTML. Хотя технически это работает, вы все равно назначаете свойства javascript атрибуту, не относящемуся к сценарию, что не является хорошей практикой. Он может даже потерпеть неудачу в старых браузерах или даже в некоторых современных (гугл-сообщение на форуме, похоже, указывает на то, что Opera не любит URL 'javascript:').

Лучше было бы использовать второй способ - поместить ваш javascript в onclickатрибут, который игнорируется, если не доступны функции сценариев. Поместите действительный URL-адрес в поле href (обычно «#»), чтобы использовать его для тех, у кого нет JavaScript.

это сработало для меня, используя эту строку кода:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Это работает

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Лично меня раздражает размещение вызовов javascript в теге HREF. Я обычно не особо обращаю внимание на то, является ли что-то ссылкой на JavaScript или нет, и часто хочется открыть что-то в новом окне. Когда я пытаюсь сделать это с одним из этих типов ссылок, я получаю пустую страницу, на которой ничего нет, и javascript в моей адресной строке. Тем не менее, это немного обойти с помощью onlick.

Еще одна вещь, которую я заметил при использовании «href» с javascript:

Скрипт в атрибуте "href" не будет выполнен, если разница во времени между двумя кликами была достаточно короткой.

Например, попробуйте запустить следующий пример и дважды щелкните (быстро!) На каждой ссылке. Первая ссылка будет выполнена только один раз. Вторая ссылка будет выполнена дважды.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Воспроизводится в Chrome (двойной щелчок) и IE11 (с тройным щелчком). В Chrome, если вы нажмете достаточно быстро, вы можете сделать 10 кликов и выполнить только одну функцию.

Firefox работает нормально.

Во-первых, hrefлучше всего использовать URL-адрес, поскольку он позволяет пользователям копировать ссылки, открывать другие вкладки и т. Д.

В некоторых случаях (например, на сайтах с частыми изменениями HTML) привязывать ссылки при каждом обновлении нецелесообразно.

Типичный метод связывания

Нормальная ссылка:

<a href="https://www.google.com/">Google<a/>

И как-то так для JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

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

Метод без привязки

Однако, если вы не хотите связываться каждый раз, вы можете использовать onclick и передать элемент и событие, например:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

И это для JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

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

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Мне показалось, что javascript: hrefs не работал, когда страница была встроена в функцию веб-страницы Outlook, где вместо почтовой папки вместо URL отображается URL-адрес.