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

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

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

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

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

Комментарии к вопросу (2)

плохая:

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

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

самый лучший:

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

$('#myLink').click(function(){ MyFunction(); return false; });
Комментарии (25)
Решение

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

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

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
Комментарии (6)

С точки зрения javascript, одно отличие заключается в том, что это ключевое слово в функция onclick обработчик будет ссылаться на DOM-элемент, с которого щелчку атрибут (в данном случае в <а> элемент), в то время как это в рот атрибут будет ссылаться на окне Object.

С точки зрения presentation, если Солар атрибут отсутствует по ссылке (т. е. в <а функция onclick=" и[...]" и>), то, по умолчанию, браузер будет отображать текст курсора (а не часто-нужные "указатель" курсор), поскольку оно рассматривает в <а> как якорь, а не ссылку.

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


Однако, если вы'вновь спрашивая, что это лучший способ, чтобы сделать динамичный экшен от щелчка объекта-дом, затем прикрепить событие на 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>
Комментарии (1)

Я использую

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

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

 A {cursor:pointer;color:blue;text-decoration:underline; }  
<a nohref onClick="alert('Hello World')">HERE</a>
Комментарии (5)

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

Комментарии (0)

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

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

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

dojo.stopEvent(event);

для этого.

Комментарии (3)

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

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
Комментарии (0)

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

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

Еще один интересный Тид-бит....

щелчку & слишком имеют разное поведение при вызове JavaScript непосредственно.

щелчку пройдет в этом контексте правильно, в то время какслишкомвыиграл&#39;т, или другими словами в<а href="на языке JavaScript:doStuff(это)" и>нет связи</а> выиграл'т работу, в то время как в `<а функция onclick="на языке JavaScript:doStuff(это)" и>нет связи</а>будет.

Да, я опустил слишком. Хотя это вовсе'т следовать спецификациям, он будет работать во всех браузерах, хотя, в идеале он должен включать в себя значения href="и код JavaScript:недействительным(0);"` В для хорошей мерой

Комментарии (0)

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

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

Комментарии (2)

Это работает

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
Комментарии (3)

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

Комментарии (0)

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

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

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


<script>
function myFunc() {
    var s = 0;
    for (var i=0; i
Комментарии (0)

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

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

Типичный Метод Bind

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

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

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

Нет Метода Bind

Если вы Don'т хотите, чтобы связать любое время, однако вы можете использовать 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), когда вы хотите, не беспокоясь о привязке каждый раз.

Комментарии (0)
 <hr>
            <h3 class="form-signin-heading"> Register</h3>
            Student
            <div class="pull-right">
                Teacher
            </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> 
Комментарии (0)

Я испытал, что JavaScript: hrefs не работает, когда страница была встроена в Outlook'ы веб-страницы, где почту папку имеет значение вместо того, чтобы показать URL-адрес

Комментарии (0)