Was macht der href-Ausdruck <a href="javascript:;"> </a>?

Ich habe die folgenden href gesehen, die von Zeit zu Zeit auf Webseiten verwendet werden. Ich verstehe jedoch nicht, was dies zu tun versucht oder welche Technik. Kann jemand bitte näher darauf eingehen?

<a href="javascript:;"></a>

Ein <a>Element ist ungültiges HTML, es sei denn, es hat entweder ein hrefoder ein nameAttribut.

Wenn Sie möchten, dass es korrekt als Link gerendert wird (z. B. unterstrichen, Handzeiger usw.), geschieht dies nur, wenn es ein hrefAttribut hat.

Code wie dieser wird daher manchmal verwendet, um einen Link zu erstellen, ohne jedoch eine tatsächliche URL im hrefAttribut angeben zu müssen. Der Entwickler wollte offensichtlich, dass der Link selbst nichts tut, und dies war der einfachste Weg, den er kannte.

Wahrscheinlich hat er an anderer Stelle einen Javascript-Ereigniscode, der ausgelöst wird, wenn auf den Link geklickt wird, und genau das möchte er tatsächlich tun, aber er möchte, dass er wie ein normaler <a>Tag-Link aussieht .

Einige Entwickler verwenden href='#'für den gleichen Zweck, aber dies führt dazu, dass der Browser an den Anfang der Seite springt, was möglicherweise nicht erwünscht ist. Und er konnte die href nicht einfach leer lassen, da href=''es sich um einen Link zurück zur aktuellen Seite handelt (dh, dies führt zu einer Seitenaktualisierung).

Es gibt Wege, um diese Dinge zu umgehen. Die Verwendung eines leeren Teils des Javascript-Codes in hrefist eine davon, und obwohl dies nicht die beste Lösung ist, funktioniert es.

Anstatt den Link zum Verschieben von Seiten (oder Ankern) zu verwenden, werden mit dieser Methode grundsätzlich JavaScript-Funktionen gestartet.

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

Durch Klicken auf den Link wird die Warnung ausgelöst.

Es gibt verschiedene Mechanismen, um zu vermeiden, dass eine Verbindung ihr Ziel erreicht. Der aus der Frage ist nicht sehr intuitiv.

Eine sauberere Option ist die Verwendung , href="#no"wo #noein nicht definierte Anker im Dokument.

Sie können einen semantischeren Namen wie #disable oder #action verwenden, um die Lesbarkeit zu verbessern.

Vorteile des Ansatzes:

• Vermeidet den Effekt "Nach oben verschieben" des leeren href = "#"
• Vermeidet die Verwendung von Javascript

Nachteile:

• Sie müssen sicherstellen, dass der Ankername im Dokument nicht verwendet wird.

Da das <a>Element nicht als Link fungiert, ist in diesen Fällen die beste Option, kein <a>Element, sondern a zu verwenden <div>und den gewünschten linkartigen Stil bereitzustellen.

<a href="javascript:alert('Hello');"></a>

ist nur eine Abkürzung für:

<a href="" onclick="alert('Hello'); return false;"></a>

Auf diese Weise kann ein Link beim Klicken absolut nichts bewirken (es sei denn, Javascript-Ereignisse sind daran gebunden).

Es ist eine Möglichkeit, Javascript auszuführen, anstatt einem Link zu folgen:

<a href="Javascript: doStuff();">link</a>

Wenn kein Javascript ausgeführt werden kann (wie in Ihrem Beispiel), wird nichts ausgeführt.

Beachten Sie dies:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

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

javascript: teilt dem Browser mit, dass er Javascript-Code schreiben wird

Alter Thread, aber ich dachte nur, dass der Grund, warum Entwickler dieses Konstrukt verwenden, nicht darin besteht, einen toten Link zu erstellen, sondern weil Javascript-URLs aus irgendeinem Grund Verweise auf das aktive HTML-Element nicht korrekt übergeben.

zB handler_function(this.id)funktioniert onClickaber nicht als Javascript URL.

Daher haben Sie die Wahl zwischen dem Schreiben von pedantisch standardkonformem Code, bei dem Sie den Aufruf für jeden Hyperlink manuell anpassen müssen, oder leicht nicht standardisiertem Code, der einmal geschrieben und überall verwendet werden kann.

Daher wird es verwendet, um js-Codes innerhalb von hrefanstelle von Ereignis-Listenern zu schreiben onclickund #Links hrefzu vermeiden , um aTags für HTML gültig zu machen .

Ich hatte eine Untersuchung darüber, wie man javascript:innerhalb von hrefAttributen verwendet.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Über diesen Code können Sie dort sogar js-Codes schreiben, anstatt nur Funktionen aufzurufen.

Getestet in Chrome Version 68.0.3440.106 (Official Build) (64-Bit)

Getestet in Firefox Quantom 61.0.1 (64-Bit)

Der beste Weg, um einen Link immer richtig zu rendern, ist mit dem CSS wie folgt:

a {cursor: pointer !important}

Man sollte vermeiden, unnötige Dinge zu befolgen, wie im Thread erwähnt.