Я хочу запустить простую функцию JavaScript по щелчку мыши без перенаправления.
Есть ли разница или преимущество между помещением вызова JavaScript в атрибут href
(например:
<a href="javascript:my_function();window.print();">....</a>
), а не в атрибуте onclick
(привязывая его к событию 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>
Почему лучше? потому что вернет false
будет браузер по ссылке
самый лучший:
Использовать jQuery или другие подобные структуры, чтобы прикрепить обработчик onclick на элемент'идентификатор.
$('#myLink').click(function(){ MyFunction(); return false; });
Размещение onclick внутри href оскорбило бы тех, кто твердо верит в разделение содержания и поведения/действия. Аргумент заключается в том, что ваш html-контент должен оставаться сфокусированным исключительно на содержании, а не на представлении или поведении.
Типичный путь в наши дни - это использование библиотеки javascript (например, jquery) и создание обработчика событий с помощью этой библиотеки. Это будет выглядеть примерно так:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
С точки зрения 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>
Я использую
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);
для этого.
он работал для меня, используя эту строку кода:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
Верхний ответ-это очень плохая практика, никогда не следует когда-либо ссылка на пустой хэш, как это может создавать проблемы на дороге.
Лучше всего привязать обработчик событий к элементу, как и многие другие люди заявляли, однако, в <а href="на языке JavaScript:doStuff();" и>делать</а>
отлично работает в любом современном браузере, и я ее активно использовать при рендеринге шаблонов, чтобы избежать необходимости повторной привязки для каждого экземпляра. В некоторых случаях, такой подход обеспечивает более высокую производительность. YMMV
Еще один интересный Тид-бит....
щелчку
& слишком
имеют разное поведение при вызове JavaScript непосредственно.
щелчку
пройдет в этом контексте правильно, в то время как
слишкомвыиграл'т, или другими словами в
<а href="на языке JavaScript:doStuff(это)" и>нет связи</а> выиграл'т работу, в то время как в `<а функция onclick="на языке JavaScript:doStuff(это)" и>нет связи</а>будет.
Да, я опустил слишком
. Хотя это вовсе'т следовать спецификациям, он будет работать во всех браузерах, хотя, в идеале он должен включать в себя значения href="и код JavaScript:недействительным(0);"` В для хорошей мерой
Имея `JavaScript-кода: в любой атрибут, что это'т специально для скриптов-это устаревший метод HTML-кода. В то время как технически это работает, вы'вновь еще назначение свойства JavaScript в скрипт атрибут, это'т хорошая практика. Он может даже не на старых браузерах, или даже некоторые современные (а погуглил форум seemd, чтобы указать, что опера не нравится 'JavaScript-код:' URL-адреса).
Лучше бы второй способ, чтобы положить ваш JavaScript-код в атрибут onclick, который игнорируется, если нет возможности сценариев доступна. Место допустимый URL-адрес в поле атрибут (обычно '#') для запасного варианта для тех, кто не имеет на JavaScript.
Это работает
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
Лично я считаю, что размещение вызовов javascript в теге HREF раздражает. Обычно я не обращаю внимания на то, является ли что-то ссылкой javascript или нет, и часто хочу открыть что-то в новом окне. Когда я пытаюсь сделать это с одной из таких ссылок, я получаю пустую страницу, на которой ничего нет, и javascript в строке местоположения. Однако это можно немного обойти, используя onlick.
Еще одна вещь, которую я заметил при использовании "не слишком" с помощью 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 работает нормально.
Во-первых, имея URL-адрес в href, то` лучше, потому что он позволяет пользователям копировать ссылки, откройте в другой вкладке, и т. д.
В некоторых случаях (например, сайты с частыми HTML изменения) это не практично, чтобы связать ссылки каждый раз, когда есть обновление.
Нормальная ссылка:
<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'т придется повторять вызовы функций в каждом звене.
Если вы 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), когда вы хотите, не беспокоясь о привязке каждый раз.
<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>