Функции 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 не позволит браузеру перейти по ссылке

best:

используйте jQuery или другую подобную структуру, чтобы прикрепить обработчик onclick по элементам ИДЕНТИФИКАТОР.

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

С точки зрения javascript, одно отличие в том, что this сайта в onclick обработчик будет ссылаться на элемент DOM, у которого это (в данном случае <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 использует

dojo.stopEvent(event);

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

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

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

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

С javascript: в любом атрибуте, который не является специально для сценариев является устаревшим методом HTML. Хотя технически это работает, вы все еще назначаете свойства javascript для атрибута без скрипта, что не является хорошей практикой. Он может даже потерпеть неудачу в старых браузерах или даже в некоторых современных (сообщение на форуме googled, похоже, указывает на то, что 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>