Ответ 1

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

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

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

Ответ 2

bad:

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

Ответ 3

В терминах 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>

Ответ 4

Я использую

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>

Ответ 5

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

Ответ 6

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

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

Проблема заключается в том, что этот WILL добавляет хеш (#) в конец URL-адреса страницы в браузере, тем самым требуя, чтобы пользователь дважды щелкнул кнопку "Назад", чтобы перейти на страницу до вашей. Учитывая это, вам нужно добавить код, чтобы остановить распространение событий. В большинстве наборов инструментов javascript уже есть функция для этого. Например, набор инструментов dojo использует

dojo.stopEvent(event);

чтобы сделать это.

Ответ 7

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

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

Ответ 8

Наличие javascript: в любом атрибуте, не предназначенном специально для сценариев, является устаревшим методом HTML. Хотя технически это работает, вы по-прежнему присваиваете свойства javascript атрибуту не script, что не является хорошей практикой. Это может даже потерпеть неудачу в старых браузерах или даже в некоторых современных (сообщение в googled forum, похоже, указывает, что Opera не нравится "javascript:" urls).

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

Ответ 9

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

Лучше всего связать обработчик события с элементом, как заявили многие другие люди, однако <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);" для хорошей оценки

Ответ 10

Это работает

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

Ответ 11

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

Ответ 12

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

script в атрибуте "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 кликов и выполнить только 1 выполнение функции.

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

Ответ 13

 <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>   

Ответ 14

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

Ответ 15

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

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

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

Обычная ссылка:

<a href="#" onclick="location.href='https://www.google.com/'; return false;">Google<a/>

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

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

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

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

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

<a href="#" onclick="location.href='https://www.google.com/'; return false;" 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) в любое время, не беспокоясь о привязке каждый раз.