Jak użyć linku do wywołania JavaScript?

166

Jak użyć linku do wywołania kodu JavaScript?

javascript Jin Yong
źródło

Odpowiedzi:

192 
<a onclick="jsfunction()" href="#">

lub 

<a onclick="jsfunction()" href="javascript:void(0);">

Edytować:

Powyższa odpowiedź nie jest dobrym rozwiązaniem, ponieważ wiele nauczyłem się o JS od czasu, gdy opublikowałem. Zobacz odpowiedź EndangeredMassa poniżej, aby uzyskać lepsze podejście do rozwiązania tego problemu.

Chelsea
źródło
11
Poleciłbym drugą, ponieważ pierwsza przewija cię na górę strony.
Matt Grande,
7
Tak, na pewno będzie, chyba że dodasz „return false”; po twojej funkcji.
Chelsea
26
To jest kod z 1998 roku. Skorzystaj z jednego z dyskretnych rozwiązań. Proszę.
Andrew Hedges
7
Nie używaj żadnego! Linki służą do linkowania, nie są fikcyjnymi elementami do wywoływania javascript.
I. Devries
4
jeśli zamierzasz umieścić javascript w tekście, zrób to w ten sposób: <a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow
201

Dyskretny JavaScript, brak zależności od biblioteki:

<html>
<head>
    <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>
EndangeredMassa
źródło
26
Czy możesz wyjaśnić, dlaczego jest to lepsze niż obecnie akceptowana odpowiedź i gdzie powinien znaleźć się skrypt na stronie (ponieważ jest to dość wyraźnie pytanie dla początkujących)?
Bill the Lizard
8
Jasne. Zaktualizowano.
EndangeredMassa
6
Więc co mam wstawić, hrefjeśli nie chcę przekierowywać użytkownika i po prostu chcę uruchomić jakiś kod? Edit: widzę, że może ona być pusta: href="".
SabreWolfy
6
Dlaczego lepiej jest dodać onclickwydarzenie przez window.onload, niż umieszczać onclickbezpośrednio w <a>tagu?
Nathan Reed
10
A co jeśli jedną z twoich obaw jest to, że nie chcesz rozdzielać swojej funkcjonalnej jednostki pracy na różne fizyczne miejsca w pliku źródłowym lub rozdzielać na wiele plików źródłowych. Jeśli umieścisz wywołanie javascript w swoim tagu a href, to jest boleśnie jasne, patrząc na jeden wiersz, co się dzieje. Martwiłbym się rozdzieleniem tej funkcjonalności na różne fizyczne miejsca, w których trudniej jest uzyskać obraz tego, co się dzieje. Może to tylko mój styl.
stu
47 
<a href="javascript:alert('Hello!');">Clicky</a>

EDYCJA, lata później: NIE! Nigdy tego nie rób! Byłem młody i głupi!

Edytuj ponownie: kilka osób zapytało, dlaczego nie powinieneś tego robić. Jest kilka powodów:

  1. Prezentacja: HTML powinien skupiać się na prezentacji. Umieszczenie JS w HREF oznacza, że ​​Twój HTML zajmuje się teraz w pewnym sensie logiką biznesową.

  2. Bezpieczeństwo: JavaScript w kodzie HTML narusza zasady bezpieczeństwa treści (CSP) . Polityka bezpieczeństwa treści (CSP) to dodatkowa warstwa zabezpieczeń, która pomaga wykrywać i łagodzić niektóre typy ataków, w tym ataki typu Cross-Site Scripting (XSS) i ataki polegające na wstrzykiwaniu danych. Ataki te są wykorzystywane do wszystkiego, od kradzieży danych po niszczenie witryn lub dystrybucję złośliwego oprogramowania. Przeczytaj więcej tutaj .

  3. Dostępność: znaczniki kotwicy służą do łączenia z innymi dokumentami / stronami / zasobami. Jeśli Twój link nigdzie nie prowadzi, powinien to być przycisk . Dzięki temu czytniki ekranu, terminale brajlowskie itp. Mogą znacznie łatwiej określić, co się dzieje, i przekazać przydatne informacje użytkownikom niedowidzącym.

Matt Grande
źródło
16
Może jakiś opis problemów z tą metodą? Czy to jest gorsze niż href='#'i alert()w onclickśrodku?
Thomas Ahle
3
Jestem nowy w javascript i nie rozumiem, co jest w tym złego. Jakiekolwiek wyjaśnienie byłoby miłe
nilanjanaLodh
1
Cześć, nie jestem też pewien, dlaczego tego nie używać? Utknąłem w scenariuszu, w którym muszę wywołać funkcję JS, ale wszystko, co mogę określić, to link. Twoje rozwiązanie zadziałało.
skapie19
43

I dlaczego nie dyskretnie z jQuery:

  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Panie Lucky
źródło
2
Czy to zadziała w przypadku SEO, tak że roboty indeksujące znajdą link i podążą za nim?
Ahi Tuna
11
ponieważ nie wszyscy używają jquery.
stu
1
@GregMiernicki Tak i nie, w zależności od tego, co rozumiesz przez link. Spójrz na HTML. Podany HREF odwiedzi robot sieciowy lub dowolny klient z wyłączoną obsługą JavaScript. Klienci obsługujący Javascript uruchomią akcję kliknięcia, a NASTĘPNIE skorzystają z odsyłacza, jeśli ta funkcja nie zwróci fałszywej wartości lub nie wywoła funkcji allowDefault. W tym przypadku href jest rezerwą, dlatego nazywa się go „dyskretnym”
Evan Langlois
12

Dyskretny Javascript ma wiele zalet, oto kroki, które należy wykonać i dlaczego warto go używać.

  1. łącze ładuje się normalnie:

    <a id="DaLink" href="http://host/toAnewPage.html"> kliknij tutaj </a>

jest to ważne, ponieważ będzie działać w przeglądarkach z wyłączoną obsługą JavaScript lub jeśli w kodzie javascript jest błąd, który nie działa.

  1. javascript uruchamia się po załadowaniu strony:

     window.onload = function(){
        document.getElementById("DaLink").onclick = function(){
               if(funcitonToCall()){
                   // most important step in this whole process
                   return false;
               }
        }
 }

  2. jeśli javascript uruchomi się pomyślnie, być może załadowanie treści na bieżącej stronie za pomocą javascript, zwrot false anuluje uruchomienie linku. innymi słowy, ustawienie return false skutkuje wyłączeniem linku, jeśli javascript został pomyślnie uruchomiony. Pozwalając mu działać, jeśli nie działa javascript, robiąc ładną kopię zapasową, aby treść była wyświetlana w obie strony, dla wyszukiwarek i jeśli twój kod się zepsuje lub jest wyświetlany w systemie innym niż javascript.

najlepszą książką na ten temat jest „Dom Scription” Jeremy'ego Keitha

Fire Crow
źródło
9

Lub, jeśli używasz PrototypeJS

<script type="text/javascript>
  Event.observe( $('thelink'), 'click', function(event) {
      //do stuff

      Event.stop(event);
  }
</script>

<a href="#" id="thelink">This is the link</a>
Mark Biek
źródło
1
Uwielbiam nie mieć wbudowanych funkcji obsługi zdarzeń.
Mark Biek
1
To jedyna droga. Prosimy o odrzucenie wbudowanych odpowiedzi. Jest to praktyka, dla której nie ma obecnie usprawiedliwienia.
Andrew Hedges
5
@ Andrew: Zostaw komentarz wraz z głosem przeciw, wyjaśniając, dlaczego odpowiedzi w tekście są złe.
Bill the Lizard
8

Myślę, że możesz skorzystać z onclickwydarzenia, coś takiego:

<a onclick="jsFunction();">
David Z
źródło
0

w oparciu o @mister_lucky answer użyj z jquery:

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

Kod HTML:

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Mostafa Asadi
źródło
-2

po prostu użyj javascript: ---- exemplale

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
Domi S Herdian
źródło