Я хочу запустити просту функцію JavaScript на клік без будь-якого перенаправлення.

Чи є якась різниця чи вигода між введенням дзвінка JavaScript в hrefатрибут (наприклад:

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

) проти введення його в onclickатрибут (прив’язування до onclickподії)?

Якщо помістити onclick всередині href, це образить тих, хто сильно вірить у відмежування вмісту від поведінки / дії. Аргумент полягає в тому, що ваш вміст html повинен залишатися орієнтованим виключно на вміст, а не на презентацію чи поведінку.

Типовим шляхом для цих днів є використання бібліотеки javascript (наприклад, jquery) та створення обробника подій за допомогою цієї бібліотеки. Це виглядатиме приблизно так:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

погано:

<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атрибуті буде посилатися на windowоб'єкт.

Що стосується подання , якщо hrefатрибут відсутній у посиланні (тобто <a onclick="[...]">), то за замовчуванням браузери відображатимуть textкурсор (а не часто бажаний pointerкурсор), оскільки він трактує <a>як якор, а не посилання.

З точки зору поведінки , коли вказується дія за допомогою навігації черезhref , браузер, як правило, підтримує відкриття цього hrefвікна в окремому вікні, використовуючи або ярлик, або контекстне меню. Це неможливо, якщо вказати дію лише через onclick.

Однак якщо ви запитуєте, який найкращий спосіб отримати динамічну дію від клацання об’єкта DOM, то найкращим способом є приєднання події за допомогою 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>

Довгий шлях, але це робить роботу. використовуйте стиль A для спрощення, тоді він стає:

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

Окрім усіх тут, href відображається у рядку стану браузера, а onclick - ні. Я думаю, що там не показувати код JavaScript.

найкращий спосіб зробити це за допомогою:

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

Проблема полягає в тому, що цей додасть хеш (#) до кінця URL-адреси сторінки в браузері, таким чином, вимагаючи від користувача два рази натиснути кнопку "назад", щоб перейти на сторінку перед вашою. Враховуючи це, вам потрібно додати деякий код, щоб зупинити поширення події. Більшість інструментаріїв JavaScript вже будуть функціонувати для цього. Наприклад, використовується інструментарій dojo

dojo.stopEvent(event);

робити так.

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

Найкраще - прив’язати обробник події до елемента, як заявили численні інші люди. <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);"добрий показник

Наявність javascript:будь-якого атрибута, який не призначений спеціально для сценаріїв, є застарілим методом HTML. Хоча технічно це працює, ви все одно привласнюєте властивості JavaScript атрибуту без скрипту, що не є хорошою практикою. Він може навіть вийти з ладу у старих браузерах або навіть у деяких сучасних (публікація на гугл-форумі, очевидно, вказує на те, що Opera не любить URL-адреси javascript: ').

Кращою практикою було б другий спосіб - ввести свій JavaScript в onclickатрибут, який ігнорується, якщо функцій сценаріїв немає. Помістіть дійсну URL-адресу в полі href (зазвичай "#") для резервного копіювання для тих, хто не має JavaScript.

він працював для мене за допомогою цього рядка коду:

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

Це працює

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

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

Ще одна річ, яку я помітив при використанні "href" з javascript:

Сценарій в атрибуті "href" не буде виконуватися, якщо різниця у часі між двома клацаннями була досить короткою.

Наприклад, спробуйте запустити наступний приклад і двічі клацніть (швидко!) На кожному посиланні. Перше посилання буде виконано лише один раз. Друга посилання буде виконана двічі.

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

Перевагами цього методу є чітке розділення розмітки та поведінки, і не потрібно повторювати виклики функцій у кожному посиланні.

Без прив'язки

Якщо ви не бажаєте прив'язувати кожен раз, ви можете використовувати 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>   

Я переконався, що javascript: hrefs не працює, коли сторінка вбудована у функцію веб-сторінки Outlook, де в папці пошти встановлено замість показу URL-адреси