Wie benutze ich einen Link, um JavaScript aufzurufen?

166

Wie verwende ich einen Link, um JavaScript-Code aufzurufen?

javascript Jin Yong
quelle

Antworten:

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

oder 

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

Bearbeiten:

Die obige Antwort ist wirklich keine gute Lösung, da ich seit meinem ersten Posting viel über JS gelernt habe. In der Antwort von EndangeredMassa unten finden Sie Informationen zur besseren Lösung dieses Problems.

Chelsea
quelle
11
Ich würde den zweiten empfehlen, da der erste Sie zum Anfang der Seite führt.
Matt Grande
7
Ja, das wird es definitiv, es sei denn, Sie fügen ein "return false" hinzu. nach Ihrer Funktion.
Chelsea
26
Dies ist der Code von 1998. Verwenden Sie eine der unauffälligen Lösungen. Bitte.
Andrew Hedges
7
Verwenden Sie keine! Links dienen zum Verknüpfen, sie sind keine Dummy-Elemente zum Aufrufen von Javascript.
I.devries
4
Wenn Sie Javascript inline setzen möchten, gehen Sie folgendermaßen vor: <a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow
201

Unauffälliges JavaScript, keine Bibliotheksabhängigkeit:

<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>
Gefährdete Masse
quelle
26
Können Sie erklären, warum dies besser ist als die derzeit akzeptierte Antwort und wohin das Skript auf der Seite gehen soll (da dies ganz klar eine Frage für Anfänger ist)?
Bill the Lizard
8
Sichere Sache. Aktualisiert.
EndangeredMassa
6
Was gebe ich für ein, hrefwenn ich den Benutzer nicht umleiten und nur Code ausführen möchte? Edit: Ich sehe, dass es leer gelassen werden kann : href="".
SabreWolfy
6
Warum ist es besser, das onclickEreignis über hinzuzufügen window.onload, als es onclickdirekt in das <a>Tag einzufügen?
Nathan Reed
10
Was ist, wenn eines Ihrer Probleme darin besteht, dass Sie Ihre funktionale Arbeitseinheit nicht an verschiedenen physischen Stellen in Ihrer Quelldatei aufteilen oder auf viele Quelldateien verteilen möchten? Wenn Sie einen Javascript-Aufruf in Ihr a href-Tag einfügen, wird dies schmerzlich deutlich, wenn Sie sich eine Zeile ansehen, was gerade passiert. Ich würde mir Sorgen machen, diese Funktionalität in verschiedene physische Orte zu unterteilen, an denen es schwieriger ist, sich ein Bild davon zu machen, was los ist. Vielleicht ist das nur mein Stil.
stu
47 
<a href="javascript:alert('Hello!');">Clicky</a>

EDIT, Jahre später: NEIN! Tu das niemals! Ich war jung und dumm!

Nochmals bearbeiten: Ein paar Leute haben gefragt, warum Sie das nicht tun sollten. Es gibt ein paar Gründe:

  1. Präsentation: HTML sollte sich auf die Präsentation konzentrieren. Das Einfügen von JS in ein HREF bedeutet, dass sich Ihr HTML jetzt irgendwie mit Geschäftslogik befasst.

  2. Sicherheit: Javascript in Ihrem HTML- Code verstößt gegen die Content Security Policy (CSP) . Content Security Policy (CSP) ist eine zusätzliche Sicherheitsebene, mit der bestimmte Arten von Angriffen erkannt und gemindert werden können, einschließlich Cross-Site Scripting (XSS) - und Dateninjektionsangriffen. Diese Angriffe werden für alles verwendet, vom Datendiebstahl bis zur Verunstaltung der Website oder der Verbreitung von Malware. Lesen Sie hier mehr .

  3. Zugänglichkeit: Anker-Tags dienen zum Verknüpfen mit anderen Dokumenten / Seiten / Ressourcen. Wenn Ihr Link nirgendwohin führt, sollte es sich um eine Schaltfläche handeln . Dies erleichtert es Bildschirmlesern, Braille-Terminals usw. erheblich, festzustellen, was gerade passiert, und sehbehinderten Benutzern nützliche Informationen zu geben.

Matt Grande
quelle
16
Vielleicht eine Beschreibung der Probleme mit dieser Methode? Ist das schlimmer als href='#'und alert()in onclick?
Thomas Ahle
3
Ich bin neu in Javascript und verstehe nicht, was daran falsch ist. Jede Erklärung wäre nett
nilanjanaLodh
1
Hallo, ich bin mir auch nicht sicher, warum ich das nicht verwenden soll. Ich stecke in einem Szenario fest, in dem ich eine JS-Funktion aufrufen muss, aber alles, was ich angeben kann, ist ein Link. Und Ihre Lösung hat funktioniert.
Skapie19
43

Und warum nicht unauffällig mit jQuery:

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

HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Herr Lucky
quelle
2
Funktioniert dies für SEO, sodass Crawler den Link finden und ihm folgen?
Ahi Thunfisch
11
weil nicht jeder jquery benutzt.
stu
1
@ GregMiernicki Ja und Nein, je nachdem, was Sie unter Link verstehen. Schauen Sie sich den HTML-Code an. Ein Webcrawler oder ein Client mit deaktiviertem Javascript besucht das angegebene HREF. Javascript-fähige Clients führen die Klickaktion aus und folgen dann dem Link, wenn diese Funktion keinen falschen Wert zurückgibt oder präventDefault aufruft. In diesem Fall ist der href ein Fallback, daher heißt er "unauffällig"
Evan Langlois
12

Unauffälliges Javascript hat viele, viele Vorteile. Hier sind die Schritte und die Gründe für die Verwendung.

  1. Der Link wird wie gewohnt geladen:

    <a id="DaLink" href="http://host/toAnewPage.html"> hier klicken </a>

Dies ist wichtig, da es für Browser mit nicht aktiviertem Javascript funktioniert oder wenn ein Fehler im Javascript-Code vorliegt, der nicht funktioniert.

  1. Javascript läuft beim Laden der Seite:

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

  2. Wenn das Javascript erfolgreich ausgeführt wird und möglicherweise der Inhalt der aktuellen Seite mit Javascript geladen wird, wird durch das Zurückgeben von false das Auslösen des Links abgebrochen. Mit anderen Worten: Wenn Sie return false setzen, wird der Link deaktiviert, wenn das Javascript erfolgreich ausgeführt wurde. Während es ausgeführt werden kann, wenn das Javascript nicht funktioniert, erstellen Sie ein nettes Backup, damit Ihr Inhalt so oder so angezeigt wird, für Suchmaschinen und wenn Ihr Code kaputt geht oder auf einem Nicht-Javascript-System angezeigt wird.

Das beste Buch zu diesem Thema ist "Dom Scription" von Jeremy Keith

Feuerkrähe
quelle
9

Oder wenn Sie PrototypeJS verwenden

<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
quelle
1
Ich liebe es, Event-Handling-Funktionen nicht in Einklang bringen zu müssen.
Mark Biek
1
Es ist der einzige Weg zu gehen. Bitte stimmen Sie die Inline-Antworten ab. Es ist eine Praxis, für die es heutzutage keine Entschuldigung gibt.
Andrew Hedges
5
@ Andrew: Bitte hinterlassen Sie einen Kommentar zusammen mit Ihrer Ablehnung, in dem erklärt wird, warum die Inline-Antworten schlecht sind.
Bill the Lizard
8

Ich denke, Sie können die onclickVeranstaltung so etwas nutzen:

<a onclick="jsFunction();">
David Z.
quelle
0

basierend auf @mister_lucky Antwort mit jquery verwenden:

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

HTML Quelltext:

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Mostafa Asadi
quelle
-2

Verwenden Sie einfach 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
quelle