kzen.dev
  • Вопросы
  • Метки
  • Пользователи
Оповещения
Вознаграждения
Регистрация
После регистрации, сможете получать уведомления об ответах и комментариях на Ваши вопросы.
Вход
Если у Вас уже есть аккаунт, войдите чтобы проверить новые уведомления.
Тут будут вознаграждения за добавленные вопросы, ответы и комментарий.
Дополнительно
Источник
Редактировать
 SkunkSpinner
SkunkSpinner
Вопрос

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

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

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

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

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

446 2009-07-01T18:59:35+00:00 15
Anik  Islam Abhi
Anik Islam Abhi
Редактировал вопрос 17-го декабря 2015 в 2:30
Программирование
javascript
href
 demp
demp
5-го июля 2012 в 4:13
2012-07-05T16:13:07+00:00
Дополнительно
Источник
Редактировать
#9219831

плохая:

<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; });
 Gray
Gray
Редактировал ответ 24-го октября 2014 в 12:33
938
0
Решение / Ответ
 Parand
Parand
1-го июля 2009 в 7:05
2009-07-01T19:05:14+00:00
Дополнительно
Источник
Редактировать
#9219824

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

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

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
 wilbbe01
wilbbe01
Редактировал ответ 8-го мая 2016 в 12:35
260
0
 Adam
Adam
1-го июля 2009 в 7:54
2009-07-01T19:54:11+00:00
Дополнительно
Источник
Редактировать
#9219828

С точки зрения 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>
 Adam
Adam
Редактировал ответ 31-го августа 2013 в 11:50
66
0
Clif Collins
Clif Collins
29-го февраля 2012 в 3:01
2012-02-29T03:01:18+00:00
Дополнительно
Источник
Редактировать
#9219830

Я использую

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>
18
0
 Kamarey
Kamarey
1-го июля 2009 в 7:09
2009-07-01T19:09:47+00:00
Дополнительно
Источник
Редактировать
#9219826

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

11
0
 linusthe3rd
linusthe3rd
2-го июля 2009 в 2:29
2009-07-02T02:29:08+00:00
Дополнительно
Источник
Редактировать
#9219829

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

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

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

dojo.stopEvent(event);

для этого.

10
0
Omar  Yassin Carcelen
Omar Yassin Carcelen
10-го декабря 2014 в 3:14
2014-12-10T15:14:20+00:00
Дополнительно
Источник
Редактировать
#9219832

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

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
8
0
 Eduardo
Eduardo
11-го марта 2017 в 8:01
2017-03-11T08:01:51+00:00
Дополнительно
Источник
Редактировать
#9219834

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

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

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

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

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

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

7
0
 zombat
zombat
1-го июля 2009 в 7:10
2009-07-01T19:10:02+00:00
Дополнительно
Источник
Редактировать
#9219827

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

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

7
0
 TitusMix
TitusMix
8-го февраля 2018 в 8:19
2018-02-08T08:19:06+00:00
Дополнительно
Источник
Редактировать
#9219836

Это работает

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
 TitusMix
TitusMix
Редактировал ответ 10-го октября 2018 в 7:05
5
0
 Peter
Peter
1-го июля 2009 в 7:08
2009-07-01T19:08:18+00:00
Дополнительно
Источник
Редактировать
#9219825

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

4
0
 kolobok
kolobok
15-го декабря 2016 в 9:59
2016-12-15T09:59:13+00:00
Дополнительно
Источник
Редактировать
#9219833

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

Сценарий в "близко" и атрибут выиграл'т быть выполнены, если разница по времени между 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 работает нормально.

3
0
 jchavannes
jchavannes
2-го марта 2019 в 9:05
2019-03-02T21:05:42+00:00
Дополнительно
Источник
Редактировать
#9219838

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

1
0
 Andrew
Andrew
7-го декабря 2017 в 5:03
2017-12-07T17:03:29+00:00
Дополнительно
Источник
Редактировать
#9219835
 <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> 
1
0
 Christian
Christian
16-го декабря 2018 в 6:40
2018-12-16T06:40:00+00:00
Дополнительно
Источник
Редактировать
#9219837

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

0
0
Похожие сообщества 12
JavaScript Jobs — чат
JavaScript Jobs — чат
26 291 пользователей
JavaScript Jobs — чат для поиска работы и людей Правила оформления: @telegram-ru/r1WQe5F1m" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru
Открыть telegram
JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
9 470 пользователей
Помогаем друг другу разбираться с JS Правила: @js_noobs_ru/rules" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@js_noobs_ru/rules Другие полезные чаты — https://github.com/goq/telegram-list или https://rudevs.network/ByKT2JwWQ
Открыть telegram
JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
7 714 пользователей
Рекомендуем сразу отключить уведомления Правила: https://git.io/JycBd См. также: @js_noobs_ru, @nodejs_ru, @ts_cool, @react_js, @electron_cool Вакансии и поиск работы: @javascript_jobs
Открыть telegram
JavaScript.Ninja
JavaScript.Ninja
3 822 пользователей
Правила поведения проекта https://telegra.ph/Kodeks-povedeniya-proekta-JavaScriptNinja-12-15
Открыть telegram
pro.js
pro.js
3 724 пользователей
Сообщество веб (и javascript) разработчиков Чат для начинающих: @js_lib ⚠️ Вакансии - раз в неделю с вилкой зп ⚠️ Оффтоп -> @flood ❌Переход на личности ❌Троллинг ❌Реклама ❌Варез По всем вопросам: @igorz Зам: @slavik4
Открыть telegram
javascript_ru
javascript_ru
2 726 пользователей
Сообщество любителей самого популярного языка программирования в мире. Публикация вакансий: @javascript_jobs Чаты: @frontend_ru @css_ru Каналы: @defront @frontendnoteschannel Флуд: @javascript_ru_flood Важно! http://nometa.xyz и http://neprivet.ru
Открыть telegram
Добавить вопрос
Категории
Все
Технологий
Культура / Отдых
Жизнь / Искусство
Наука
Профессии
Бизнес
Пользователи
Все
Новые
Популярные
1
Ilya Smirnov
Зарегистрирован 2 дня назад
2
Денис Васьков
Зарегистрирован 4 дня назад
3
Dima Patrushev
Зарегистрирован 6 дней назад
4
sirojidddin otaboyev
Зарегистрирован 2 недели назад
5
Елена Гайдамамакинат
Зарегистрирован 2 недели назад
BG
CS
DA
DE
EL
ES
FR
ID
IT
JA
KO
LV
NL
NO
PT
RO
RU
SK
SV
TR
ZH
© kzen.dev 2023
Источник
stackoverflow.com
под лицензией cc by-sa 3.0 с атрибуцией