Функция JavaScript в href против onclick

плохое:

<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 атрибут будет ссылаться на

Я использую

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

долгий путь вокруг, но он получает работу. используйте стиль для упрощения тогда он становится:

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

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

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

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

dojo.stopEvent(event);

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

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

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

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

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

лучшей практикой будет второй способ, чтобы поместить ваш javascript в

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

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

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

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

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

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

<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 работает нормально.

это работает

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

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