Tag HTML <a> chce dodać działanie href i onclick

123

Chciałbym zapytać o tag HTML

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

Jak zrobić to tag pracy z href i onClick ? (wolę onClick działa najpierw, a następnie href)


źródło

Odpowiedzi:

232

Masz już to, czego potrzebujesz, z niewielką zmianą składni:

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

Domyślnym zachowaniem <a>tagu onclicki hrefwłaściwości jest wykonanie onclick, a następnie podążanie hrefza nim, dopóki onclicknie zwróci false, anulując zdarzenie (lub zdarzenie nie zostało zablokowane)

Ian
źródło
Czy można to również zrobić za pomocą funkcji element.addEventListener?
TheEquah
4
Nie działa dla mnie, dopóki nie wstawię href="#"tam prawdziwego adresu URL.
yegor256,
Używam frameworka Laravel, więc w moim widoku ostrza umieściłem to, To nie działa, czy ktoś próbował tego z laravelem?
Vajira Prabuddhaka
To rozwiązanie nie działa, jeśli mam jakąkolwiek metodę akcji wywołaną w kontrolerze MVC w href. Czy ktoś może pomóc?
DharaPPatel
10

Użyj jQuery . Musisz uchwycić clickwydarzenie, a następnie przejść do witryny internetowej.

$("#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>

Sudipta Chatterjee
źródło
12
nie będę używać żadnego frameworka javascript. ale dziękuję za odpowiedź
7
Powyższe nie jest rzeczywistym linkiem. Nie można go otworzyć w nowej karcie i jest to bardzo zła praktyka. Jeśli coś można otworzyć w nowej karcie (ma adres URL), zawsze dodaj znaczący hrefatrybut.
Nux
2

Aby to osiągnąć, użyj następującego 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>

Oto działający przykład .

Kamil Kiełczewski
źródło
To działa dla mnie w Chrome, jednak Safari wydaje się uruchamiać funkcję, ale nie otwiera href ... jakieś sugestie?
Ben
@Ben Zrobiłem test na skrzypcach bez JS - tylko czysty html: <a href="http://example.com" >Item</a>aw Chrome widzę komunikat, aby zezwolić stronie na uruchomienie tego linku (alert na końcu paska chrome url). W safari w konsoli widzę ostrzeżenie: [zablokowano] Strona pod adresem fiddle.jshell.net/_display nie mogła wyświetlać niezabezpieczonych treści z example.com - więc prawdopodobnie jest to problem z bezpieczeństwem (tylko na skrzypcach?)
Kamil Kiełczewski
1

Nie potrzeba jQuery.

Niektórzy mówią, że używanie onclickjest złą praktyką ...

W tym przykładzie zastosowano czysty javascript przeglądarki. Domyślnie wydaje się, że moduł obsługi kliknięć oceni przed nawigacją, więc możesz anulować nawigację i zrobić własną, jeśli chcesz.

<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>
TeamDman
źródło
-1

Użyj ng-clickzamiast onclick. i to takie proste:

<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>
mak-273
źródło
Tylko w AngularJS
Corrodian