HTML тег <a> хочу додати як href, так і onclick працює


123

Я хотів би запитати про тег HTML

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Як зробити це тег працює з HREF і OnClick ? (надайте перевагу спочатку onClick, а потім href)

Відповіді:


232

Ви вже маєте те, що вам потрібно, із незначною зміною синтаксису:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

Типовою поведінкою <a>тегів onclickта hrefвластивостей є виконання onclick, а потім дотримуйтесь тих hrefпір, onclickпоки не повернеться false, скасувавши подію (або подія не була запобіжена)


Чи існує також спосіб це зробити за допомогою функції element.addEventListener?
TheEquah

4
Це не працює для мене, поки я href="#"не вставлю його замість реальної URL-адреси.
yegor256

Я використовую рамку laravel, тому в моєму перегляді леза я включив це. Це не працює, чи хтось спробував це з laravel?
Ваджіра Прабуддхака

Це рішення не працює, якщо у мене є якийсь метод дії, який називається в контролері mvc в href. Може хтось, будь ласка, допоможе?
DharaPPatel

10

Використовуйте jQuery . Вам потрібно зафіксувати clickподію, а потім перейти на веб-сайт.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>


11
я не буду використовувати жодну рамку javascript. але дякую за вашу відповідь

7
Вище не є фактичним посиланням. Його не можна відкрити в новій вкладці, і це дуже погана практика. Якщо щось можна відкрити в новій вкладці (має URL-адресу), завжди додайте змістовий hrefатрибут.
Nux

2

Щоб досягти цього, використовуйте наступний html:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Ось робочий приклад .


Це працює для мене в Chrome, однак, схоже, Safari виконує функцію, але не відкриває href ... якісь сугезії?
Бен

@Ben я зробив тест на скрипку без JS - тільки чистий html: <a href="http://example.com" >Item</a>а в Chrome я бачу повідомлення, яке дозволяє сторінці запускати це посилання (попередження в кінці панелі хромованого URL-адреси). У сафарі в консолі я бачу попередження: [заблоковано] Сторінку на fiddle.jshell.net/_display заборонено відображати незахищений контент із example.com - тому, ймовірно, це якась проблема безпеки (лише на скрипці?)
Каміль Кичевчевський

1

Не потрібно jQuery.

Деякі люди кажуть, що використовують onclick поганої практики ...

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

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

-1

Використання ng-clickзамість onclick. і це так само просто:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

Тільки в AngularJS
Корродієв,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.