2010-06-05 12 views
5

Was ist der folgende Code bedeuten -Javascript-Protokoll und Ereignisse

<a href="javacsript:;" onClick="addItem(160)">some link</a> 

Meine grundlegende Zweifel ist, welches Skript ausgeführt wird, wenn wir auf den Link klicken

Antwort

3

Die onclick erste ausgeführt wird. Wenn onclick nicht false zurückgibt (in diesem Fall nicht), wird href verarbeitet.

+0

und welches Skript wird aufgerufen, wenn die href verarbeitet wird? – ayush

+0

In Ihrem Beispiel wird das Inline-JavaScript ('javascript:;') verarbeitet. Wenn href eine reguläre URL wäre, würde der Browser einfach dorthin navigieren. – Matt

+0

Nichts. Der Autor denkt wahrscheinlich, dass dies eine gute Möglichkeit ist, den Anker daran zu hindern, auf eine andere Seite zu wechseln, wenn der Onclick nicht false zurückgibt. Sie werden auch javascript: void() viel sehen. Es ist am besten sicherzustellen, dass das onclick-Ereignis false zurückgibt, und wenn dies nicht der Fall ist, stellen Sie sicher, dass die href auf eine Art von Fallback zurückgreift. Oder verwenden Sie das Anker-Tag überhaupt nicht. – Andrew

0

Ihre Zweifel wahr ist, müssen Sie "-Funktion addItem (x)" in einer Javascript-Datei finden, die von Script-Tag von der Seite verlinkt ist (in der Regel in Kopf-Tag)

+0

Die Funktion addItem befindet sich in einer der Skriptdateien. Mein Zweifel ist jedoch, was passiert, wenn addItem false zurückgibt? – ayush

0

Die "javascript:". Innen href ist eine Möglichkeit, dem Browser mitzuteilen, dass er JavaScript ausführen soll, anstatt auf eine andere Seite zu wechseln.

Diese Zeile wird zum Beispiel ein Meldungsfeld mit "Test" Nachricht anzeigen.

<a href="javascript:alert('testing');">Click me</a> 

und dieser wird eine leere JavaScript-Anweisung ausführen, die nichts

<a href="javacsript:;">Click me</a> 

Das Onclick ist ein Ereignis, das auch feuert tun wird, wenn ein Link geklickt wird. Im Gegensatz zu href erlaubt es Ihnen nicht, einen Link zu einer anderen Seite zu setzen; Es akzeptiert nur Javascript.

Browser werden zuerst onclick-Ereignis auslösen und dann href-Attribut verarbeiten. Wenn es eine URL ist (leere href bedeutet aktuelle URL; klick wird nur die Seite aktualisieren) wird es folgen, wenn es Javascript ist, wird es ausgeführt.

Setzen "javascript :;" oder "javascript: void (null);" Inside href ist alt und falsch Technik, um sicherzustellen, Browser aktualisiert die Seite nicht nach onclick verarbeitet wird.

Um Ihre Frage zu beantworten; beide Skripte werden ausgeführt, aber das href-Skript wird nichts tun.

+0

Nicht so einfach, @Luc !! Sehen Sie, was passiert, wenn das Skript tatsächlich einen Wert zurückgibt! – Pointy

2

Der javascript Teil im href Attribut ist das Protokoll (Sie wissen, wie http, ftp oder mailto). Es teilt dem Browser mit, dass die URL tatsächlich JavaScript-Code ist.

Normalerweise, wenn Sie auf einen Link klicken, wird der Browser ausgeführt, was auch immer es im href Attribut findet. Der Browser wird jedoch auch das onclick Ereignis auslösen, bevor es die Href-Sache behandelt. Wenn Sie also einen onclick-Handler setzen, wird das normale Verhalten überschrieben.

So wird der Event-Handler zum König und hat die Möglichkeit, das Standardverhalten des Browsers zuzulassen oder zu verhindern, indem true (allow) oder false (prevent) zurückgegeben wird.

Also, in Ihrem Beispiel, wenn Sie auf diesen Link klicken, wird der Browser addItem auslösen. Wenn es false zurückgibt, passiert nichts. Wenn es den Wert true zurückgibt, führt der Browser den Code im Attribut href aus. Aber da es dort keine Aussage findet (d. H. Leere Aussage), passiert nichts.

Versuchen Sie, den folgenden Code:

<a href="http://google.com/" onclick="return false;">won't go to google.com</a> 
<a href="http://google.com/" onclick="return true;">will go to google.com</a>

Macht das Sinn für Sie?

0

Beachten Sie, dass, wenn der Browser den "javascript:" Wert eines "href" interpretiert, wenn der Rückgabewert nicht leer ist, dann wird es als Dokument Inhalt für das <a> Tag interpretiert werden! Hier ist eine Testseite für Sie zu genießen:

http://gutfullofbeer.net/jslink.html

Die Quelle für diese Seite (es betrachtet, es ist wirklich kurz) den folgenden Link:

<a href='javascript:getLink()'>Click to go there!</a> 

Die Funktion „getLink()“wird wie folgt definiert:

function getLink() { 
    var sel = document.getElementById('sel'); 
    return sel.options[sel.selectedIndex].value; 
    } 

wie Sie sehen, greift die Funktion den aktuell ausgewählten Wert der <select> Element auf der Seite und gibt zurück. Wie sieht das <select> Element aus?

Die Werte dieser Optionen sind vollständige HTML-Markup für eine Seite mit einer Weiterleitung an die angeforderte Website. Da die URL einen Wert zurückgibt, wird dieser Wert vom Browser als neuer Seiteninhalt verstanden.

Es ist ziemlich überwältigend. Ich bin mir nicht sicher, warum du das jemals tun würdest.