wake-up-neo.com

Welchen "href" -Wert soll ich für JavaScript-Links "#" oder "javascript: void (0)" verwenden?

Im Folgenden finden Sie zwei Methoden zum Erstellen eines Links, der ausschließlich zum Ausführen von JavaScript-Code dient. Was ist in Bezug auf Funktionalität, Seitenladegeschwindigkeit, Überprüfungszwecke usw. besser?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

oder

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
3929
2cBGj7vsfp

Ich benutze javascript:void(0).

Drei Gründe. Die Verwendung von # in einem Entwicklerteam zu fördern, führt unweigerlich dazu, dass einige den Rückgabewert der Funktion verwenden, die folgendermaßen aufgerufen wird:

function doSomething() {
    //Some code
    return false;
}

Dann vergessen sie jedoch, return doSomething() für den Onclick zu verwenden und verwenden einfach doSomething().

Ein zweiter Grund zum Vermeiden von # ist, dass das endgültige return false; nicht ausgeführt wird, wenn die aufgerufene Funktion einen Fehler auslöst. Daher müssen die Entwickler auch daran denken, Fehler in der aufgerufenen Funktion angemessen zu behandeln.

Ein dritter Grund ist, dass es Fälle gibt, in denen die Ereigniseigenschaft onclick dynamisch zugewiesen wird. Ich bevorzuge es, eine Funktion aufrufen oder dynamisch zuweisen zu können, ohne die Funktion speziell für die eine oder andere Anlagemethode codieren zu müssen. Daher sieht mein onclick (oder auf irgendetwas anderem) im HTML-Markup folgendermaßen aus:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

Die Verwendung von javascript:void(0) vermeidet alle oben genannten Kopfschmerzen, und ich habe keine Beispiele für Nachteile gefunden.

Wenn Sie ein Einzelentwickler sind, können Sie natürlich Ihre eigene Wahl treffen. Wenn Sie jedoch als Team arbeiten, müssen Sie Folgendes angeben:

Verwenden Sie href="#", stellen Sie sicher, dass onclick immer return false; am Ende enthält, dass eine aufgerufene Funktion keinen Fehler auslöst und wenn Sie eine Funktion dynamisch an die Eigenschaft make onclick anhängen Stellen Sie sicher, dass es nicht nur einen Fehler auslöst, sondern auch false zurückgibt.

OR

Benutze href="javascript:void(0)"

Die zweite ist eindeutig viel einfacher zu kommunizieren.

2115
AnthonyWJones

Weder.

Wenn Sie eine tatsächliche URL haben können, die sinnvoll ist, verwenden Sie diese als HREF. Der Klick wird nicht ausgelöst, wenn jemand mit der mittleren Maustaste auf Ihren Link klickt, um einen neuen Tab zu öffnen, oder wenn JavaScript deaktiviert ist.

Wenn dies nicht möglich ist, sollten Sie mindestens das Ankertag mit JavaScript und den entsprechenden Click-Ereignishandlern in das Dokument einfügen.

Mir ist klar, dass dies nicht immer möglich ist, aber meiner Meinung nach sollte dies bei der Entwicklung einer öffentlichen Website angestrebt werden.

Check out nauffälliges JavaScript und Progressive Enhancement (beide Wikipedia).

1274
Aaron Wagner

Das Ausführen von <a href="#" onclick="myJsFunc();">Link</a> oder <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> oder was auch immer das ein onclick Attribut enthält - war vor fünf Jahren in Ordnung, obwohl es jetzt eine schlechte Übung sein kann. Hier ist der Grund:

  1. Es fördert das Üben von aufdringlichem JavaScript, das sich als schwierig zu warten und schwierig zu skalieren erwiesen hat. Mehr dazu in nauffälliges JavaScript.

  2. Sie verbringen Ihre Zeit damit, unglaublich ausführlichen Code zu schreiben - was Ihrer Codebasis nur sehr wenig (wenn überhaupt) nützt.

  3. Es gibt jetzt bessere, einfachere und besser wartbare und skalierbare Möglichkeiten, um das gewünschte Ergebnis zu erzielen.

Der unauffällige JavaScript-Weg

Nur haben Sie überhaupt kein href Attribut! Bei einem guten CSS-Reset wird der fehlende Standard-Cursor-Stil berücksichtigt, sodass dies kein Problem darstellt. Fügen Sie dann Ihre JavaScript-Funktionalität mit eleganten und unauffälligen Best Practices hinzu, die besser zu pflegen sind, da Ihre JavaScript-Logik nicht in Ihrem Markup, sondern in JavaScript verbleibt. Dies ist wichtig, wenn Sie mit der Entwicklung umfangreicher JavaScript-Anwendungen beginnen, in die Ihre Logik aufgeteilt werden muss Blackbox-Komponenten und -Vorlagen. Mehr dazu in Groß angelegte JavaScript-Anwendungsarchitektur

Einfaches Codebeispiel

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Ein blackboxed Backbone.js Beispiel

Für ein skalierbares Blackbox-Backbone.js-Komponentenbeispiel - siehe dieses funktionierende jsfiddle-Beispiel hier. Beachten Sie, wie wir unauffällige JavaScript-Praktiken anwenden und in einer kleinen Menge Code eine Komponente haben, die mehrmals auf der Seite wiederholt werden kann, ohne dass Nebenwirkungen oder Konflikte zwischen den verschiedenen Komponenteninstanzen auftreten. Tolle!

Anmerkungen

  • Wenn das href -Attribut für das a -Element weggelassen wird, kann auf das Element nicht mit der tab -Tastennavigation zugegriffen werden. Wenn Sie möchten, dass auf diese Elemente über die Taste tab zugegriffen werden kann, können Sie das Attribut tabindex festlegen oder stattdessen die Elemente button verwenden. Sie können Schaltflächenelemente einfach so gestalten, dass sie wie normale Links aussehen, wie in Antwort von Tracker1 erwähnt.

  • Wenn das href -Attribut für das a -Element weggelassen wird, übernehmen Internet Explorer 6 und Internet Explorer 7 das a:hover -Stil nicht Aus diesem Grund haben wir stattdessen ein einfaches JavaScript-Shim hinzugefügt, um dies über a.hover zu erreichen. Was vollkommen in Ordnung ist, als ob Sie kein href-Attribut und keine würdevolle Verschlechterung haben, dann wird Ihr Link sowieso nicht funktionieren - und Sie werden größere Probleme haben, um die Sie sich sorgen müssen.

  • Wenn Sie möchten, dass Ihre Aktion weiterhin mit deaktiviertem JavaScript funktioniert, verwenden Sie ein a -Element mit einem href -Attribut, das auf eine URL verweist, die die Aktion manuell ausführt, anstatt über eine Ajax-Anforderung oder was auch immer der Weg, den man gehen sollte. Wenn Sie dies tun, möchten Sie sicherstellen, dass Sie bei Ihrem Klickaufruf eine event.preventDefault() ausführen, um sicherzustellen, dass der Link nicht folgt, wenn Sie auf die Schaltfläche klicken. Diese Option wird als zierliche Verschlechterung bezeichnet.

760
balupton

'#' bringt den Benutzer zurück zum Anfang der Seite, daher gehe ich normalerweise mit void(0).

javascript:; verhält sich auch wie javascript:void(0);

308
Adam Tuttle

Ich würde ehrlich gesagt auch nicht vorschlagen. Ich würde für dieses Verhalten einen stilisierten <button></button> verwenden.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Auf diese Weise können Sie Ihren Onclick zuweisen. Ich schlage auch vor, über ein Skript zu binden, ohne das onclick -Attribut für das Element-Tag zu verwenden. Das einzige Problem ist der Pseudo-3D-Texteffekt in älteren IEs, der nicht deaktiviert werden kann.


Wenn Sie MUSS ein A-Element verwenden, verwenden Sie javascript:void(0); aus Gründen, die bereits erwähnt wurden.

  • Wird immer abfangen, falls Ihr Onclick-Ereignis fehlschlägt.
  • Es treten keine fehlerhaften Ladeaufrufe auf oder es werden andere Ereignisse ausgelöst, die auf einer Hash-Änderung basieren
  • Das Hash-Tag kann zu unerwartetem Verhalten führen, wenn der Klick durchfällt (durch Klicken ausgelöst). Vermeiden Sie es, es sei denn, es handelt sich um ein geeignetes Durchfallverhalten, und Sie möchten den Navigationsverlauf ändern.

HINWEIS: Sie können den 0 durch einen String wie javascript:void('Delete record 123') ersetzen, der als zusätzliche Anzeige für die tatsächliche Wirkung des Klicks dienen kann.

253
Tracker1

Die erste, idealerweise mit einem echten Link, dem Sie folgen sollten, falls der Benutzer JavaScript deaktiviert hat. Stellen Sie einfach sicher, dass Sie false zurückgeben, um zu verhindern, dass das Click-Ereignis ausgelöst wird, wenn JavaScript ausgeführt wird.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Wenn Sie Angular2 verwenden, funktioniert dieser Weg:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Siehe hier https://stackoverflow.com/a/45465728/2803344

137
Zach

Weder wenn du mich fragst;

Wenn Ihr "Link" den einzigen Zweck hat, JavaScript-Code auszuführen, gilt er nicht als Link. eher ein Stück Text mit einer daran gekoppelten JavaScript-Funktion. Ich würde empfehlen, ein <span> -Tag mit einem onclick handler -Anhang und ein paar grundlegenden CSS-Anweisungen zu verwenden, um einen Link zu imitieren. Links werden zur Navigation erstellt, und wenn Ihr JavaScript-Code nicht zur Navigation dient, sollte es sich nicht um ein <a> -Tag handeln.

Beispiel:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>
98
fijter

Idealerweise würden Sie dies tun:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Oder, noch besser, Sie hätten den Standardaktionslink im HTML und würden das onclick-Ereignis dem Element unauffällig über JavaScript hinzufügen, nachdem das DOM gerendert wurde, um sicherzustellen, dass JavaScript nicht vorhanden ist/verwendet wird Lassen Sie unnötige Event-Handler Ihren Code durchforsten und möglicherweise Ihren eigentlichen Inhalt verschleiern (oder zumindest davon ablenken).

96
Steve Paulo

Wenn Sie nur # verwenden, werden einige lustige Bewegungen ausgeführt. Daher würde ich die Verwendung von #self empfehlen, wenn Sie den Schreibaufwand von JavaScript bla, bla, reduzieren möchten.

76
Spammer Joe

Ich benutze die folgenden

<a href="javascript:;" onclick="myJsFunc();">Link</a>

stattdessen

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
65
se_pavel

Ich stimme anderen Vorschlägen zu, die besagen, dass Sie eine reguläre URL im Attribut href verwenden und dann in onclick eine JavaScript-Funktion aufrufen sollten. Der Fehler ist, dass sie nach dem Aufruf automatisch return false hinzufügen.

Das Problem bei diesem Ansatz ist, dass, wenn die Funktion nicht funktioniert oder ein Problem auftritt, der Link nicht mehr angeklickt werden kann. Das Onclick-Ereignis gibt immer false zurück, sodass die normale URL nicht aufgerufen wird.

Es gibt eine sehr einfache Lösung. Lassen Sie die Funktion true zurückgeben, wenn sie korrekt funktioniert. Verwenden Sie dann den zurückgegebenen Wert, um zu bestimmen, ob der Klick abgebrochen werden soll oder nicht:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Beachten Sie, dass ich das Ergebnis der Funktion doSomething() negiere. Wenn es funktioniert, gibt es true zurück, daher wird es negiert (false) und der path/to/some/URL wird nicht aufgerufen. Wenn die Funktion false zurückgibt (zum Beispiel unterstützt der Browser nichts, was in der Funktion verwendet wird, oder irgendetwas anderes geht schief), wird sie zu true negiert und der path/to/some/URL wird aufgerufen .

53
Fczbkk

# ist besser als javascript:anything, aber das Folgende ist noch besser:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Sie sollten immer nach einer angemessenen Verschlechterung streben (für den Fall, dass der Benutzer JavaScript nicht aktiviert hat ... und wenn es mit den Spezifikationen und dem Budget übereinstimmt). Es wird auch als schlechte Form angesehen, JavaScript-Attribute und -Protokolle direkt in HTML zu verwenden.

50
Justin Johnson

Ich empfehle, stattdessen ein <button> -Element zu verwenden , insbesondere , wenn das Steuerelement eine Änderung der Daten bewirken soll. (So ​​etwas wie ein POST.)

Es ist noch besser, wenn Sie die Elemente unauffällig injizieren, eine Art progressive Verbesserung. (Siehe dieser Kommentar .)

39
phyzome

Sofern Sie den Link nicht mit JavaScript ausschreiben (damit Sie wissen, dass er im Browser aktiviert ist), sollten Sie im Idealfall einen geeigneten Link für Personen bereitstellen, die mit deaktiviertem JavaScript surfen, und dann die Standardaktion des Links in Ihrem On-Click verhindern Ereignishandler. Auf diese Weise wird die Funktion bei aktiviertem JavaScript ausgeführt, und bei deaktiviertem JavaScript wird zu einer geeigneten Seite (oder Position auf derselben Seite) gesprungen, anstatt nur auf den Link zu klicken und nichts zu passieren.

38
Simon Forrest

Auf jeden Fall ist Hash (#) besser, da es sich bei JavaScript um ein Pseudoschema handelt:

  1. verschmutzt die Geschichte
  2. instanziiert eine neue Kopie der Engine
  3. läuft im globalen Bereich und respektiert das Ereignissystem nicht.

Natürlich ist "#" mit einem Onclick-Handler, der Standardaktionen verhindert, [viel] besser. Darüber hinaus ist ein Link, der ausschließlich zum Ausführen von JavaScript dient, kein "Link", es sei denn, Sie senden den Benutzer zu einem vernünftigen Anker auf der Seite (nur # wird nach oben gesendet), wenn ein Fehler auftritt. Sie können einfach das Erscheinungsbild der Verknüpfung mit dem Stylesheet simulieren und href überhaupt vergessen.

In Bezug auf den Vorschlag von Cowgod ist dies besonders wichtig: ...href="javascript_required.html" onclick="... Dies ist ein guter Ansatz, unterscheidet jedoch nicht zwischen Szenarien mit "JavaScript deaktiviert" und "Onclick fehlgeschlagen".

35
Free Consulting

Ich gehe normalerweise für

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Es ist kürzer als Javascript: void (0) und macht dasselbe.

30
dnetix

Ich würde ... benutzen:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Gründe:

  1. Dies macht die href einfach, Suchmaschinen brauchen es. Wenn Sie etwas anderes verwenden (z. B. eine Zeichenfolge), kann dies den Fehler 404 not found verursachen.
  2. Wenn Sie mit der Maus über den Link fahren, wird nicht angezeigt, dass es sich um ein Skript handelt.
  3. Durch die Verwendung von return false; springt die Seite nicht nach oben oder unterbricht die Schaltfläche back.
27
Eric Yin

Ich wähle use javascript:void(0), da dies das Öffnen des Inhaltsmenüs durch Klicken mit der rechten Maustaste verhindern könnte. Aber javascript:; ist kürzer und macht dasselbe.

25
user564706

Wenn Sie also einige JavaScript-Aufgaben mit einem <a />-Tag ausführen und auch href="#" einfügen, können Sie am Ende des Ereignisses (im Fall von) return false hinzufügen Inline Event Bindung) wie:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Oder Sie können das href Attribut mit JavaScript wie folgt ändern:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

oder

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Aber semantisch sind alle oben genannten Wege, um dies zu erreichen, falsch (es funktioniert aber gut) . Wenn für die Navigation auf der Seite kein Element erstellt wurde, mit dem einige JavaScript-Elemente verknüpft sind, sollte es sich nicht um ein <a> -Tag handeln.

Sie können stattdessen einfach einen <button /> verwenden, um Dinge oder andere Elemente wie b, span oder was auch immer entsprechend Ihren Anforderungen zu tun, da Sie Ereignisse für alle Elemente hinzufügen dürfen.


Also, es gibt einen Vorteil um <a href="#"> zu verwenden. Sie erhalten standardmäßig den Cursorzeiger auf dieses Element, wenn Sie a href="#" ausführen. Dafür kann man, glaube ich, CSS wie cursor:pointer; verwenden, das auch dieses Problem löst.

Und am Ende, wenn Sie das Ereignis aus dem JavaScript-Code selbst binden, können Sie event.preventDefault() ausführen, um dies zu erreichen, wenn Sie ein <a> -Tag verwenden, aber wenn Sie dafür kein <a> -Tag verwenden, sind Sie da Holen Sie sich einen Vorteil, Sie müssen dies nicht tun.

Also, wenn Sie sehen, ist es besser, kein Tag für diese Art von Sachen zu verwenden.

23
Ashish Kumar

Verwenden Sie Links nicht ausschließlich zum Ausführen von JavaScript.

Bei Verwendung von href = "#" wird die Seite nach oben verschoben. Die Verwendung von void (0) führt zu Navigationsproblemen im Browser.

Verwenden Sie stattdessen ein anderes Element als einen Link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Und gestalte es mit CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
23
Garrett

Es wäre besser, jQuery zu verwenden,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

und lassen Sie sowohl href="#" als auch href="javascript:void(0)" weg.

Das Ankertag-Markup wird wie folgt aussehen

<a onclick="hello()">Hello</a>

Einfach genug!

22
naveen

Wenn Sie zufällig AngularJS verwenden, können Sie Folgendes verwenden:

<a href="">Do some fancy JavaScript</a>

Welches wird nichts tun.

In Ergänzung

  • Sie gelangen nicht wie mit (#) An den Anfang der Seite.
    • Daher müssen Sie false nicht explizit mit JavaScript zurückgeben
  • Es ist kurz und prägnant
20
whirlwin

Normalerweise sollten Sie immer einen Fallback-Link haben, um sicherzustellen, dass Clients mit deaktiviertem JavaScript weiterhin über einige Funktionen verfügen. Dieses Konzept nennt man unauffälliges JavaScript.

Beispiel ... Angenommen, Sie haben den folgenden Suchlink:

<a href="search.php" id="searchLink">Search</a>

Sie können immer Folgendes tun:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Auf diese Weise werden Personen mit deaktiviertem JavaScript an search.php weitergeleitet, während Ihre Betrachter mit JavaScript Ihre erweiterten Funktionen anzeigen.

19
Andrew Moore

Wenn es kein href gibt, gibt es möglicherweise keinen Grund, ein Anker-Tag zu verwenden.

Sie können Ereignisse (Klicken, Bewegen usw.) an fast jedes Element anhängen. Warum also nicht einfach ein spanoder ein div verwenden?

Und für Benutzer mit deaktiviertem JavaScript: Wenn es keinen Fallback gibt (z. B. eine alternative href), sollten sie zumindest nicht in der Lage sein, dieses Element zu sehen und mit ihm zu interagieren, unabhängig davon, was es ist <a> oder ein <span> -Tag.

18
achairapart

Ich glaube, Sie präsentieren eine falsche Zweiteilung. Dies sind nicht die einzigen beiden Optionen.

Ich stimme Herrn D4V360 zu, der vorschlug, dass Sie, obwohl Sie das Anchor-Tag verwenden, hier nicht wirklich einen Anker haben. Alles, was Sie haben, ist ein spezieller Abschnitt eines Dokuments, der sich etwas anders verhalten sollte. Ein <span> -Tag ist weitaus geeigneter.

16
Clever Human

Ich habe beide in google chrome mit den Entwicklertools ausprobiert, und der id="#" hat 0,32 Sekunden gedauert. Während die Methode javascript:void(0) nur 0,18 Sekunden dauerte. In Google Chrome funktioniert javascript:void(0) also besser und schneller.

16
user6460587

Je nachdem, was Sie erreichen möchten, können Sie den Klick vergessen und einfach die href verwenden:

<a href="javascript:myJsFunc()">Link Text</a>

Es umgeht die Notwendigkeit, false zurückzugeben. Die Option # gefällt mir nicht, da der Benutzer, wie bereits erwähnt, an den Anfang der Seite gelangt. Wenn Sie dem Benutzer an einen anderen Ort senden möchten, für den kein JavaScript aktiviert ist (was bei meiner Arbeit selten vorkommt, aber eine sehr gute Idee ist), eignet sich die von Steve vorgeschlagene Methode hervorragend.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Zuletzt können Sie javascript:void(0) verwenden, wenn Sie nicht möchten, dass jemand irgendwohin geht und wenn Sie keine JavaScript-Funktion aufrufen möchten. Es funktioniert hervorragend, wenn Sie ein Bild haben, mit dem ein Mouseover-Ereignis stattfinden soll, der Benutzer jedoch nichts anklicken kann.

16
Will Read

Wenn ich mehrere faux-links habe, gebe ich ihnen lieber eine Klasse von "no-link".

Dann füge ich in jQuery den folgenden Code hinzu:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Und für das HTML ist der Link einfach

<a href="/" class="no-link">Faux-Link</a>

Ich benutze keine Hash-Tags, es sei denn, sie werden als Anker verwendet, und ich mache das oben genannte nur, wenn ich mehr als zwei Faux-Links habe, ansonsten benutze ich Javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Normalerweise vermeide ich es einfach, überhaupt einen Link zu verwenden, wickle einfach etwas in eine Zeitspanne um und aktiviere damit JavaScript-Code, z. B. ein Popup oder eine Inhaltsanzeige.

Ich persönlich benutze sie in Kombination. Zum Beispiel:

HTML

<a href="#">Link</a>

mit ein bisschen jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

oder

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Aber ich benutze das nur, um zu verhindern, dass die Seite nach oben springt, wenn der Benutzer auf einen leeren Anker klickt. Ich verwende nur selten onClick- und andere on -Ereignisse direkt in HTML.

Mein Vorschlag wäre, <span> -Element mit dem class -Attribut anstelle eines Ankers zu verwenden. Zum Beispiel:

<span class="link">Link</span>

Weisen Sie dann die Funktion .link mit einem Skript zu, das in den Text und direkt vor dem Tag </body> oder in einem externen JavaScript-Dokument eingebunden ist.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Hinweis: Verwenden Sie für dynamisch erstellte Elemente:

$('.link').on('click', function() {
    // do something
});

Und für dynamisch erstellte Elemente, die mit dynamisch erstellten Elementen erstellt werden, verwenden Sie:

$(document).on('click','.link', function() {
    // do something
});

Dann können Sie das span-Element so gestalten, dass es mit ein wenig CSS wie ein Anker aussieht:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Hier ist ein jsFiddle Beispiel für das oben Genannte.

14
mdesdev

Ich umschreibe grundsätzlich von dieser praktische Artikel verwendet progressive Verbesserung . Die kurze Antwort lautet, dass Sie niemals javascript:void(0); oder # verwenden, es sei denn, Ihre Benutzeroberfläche hat bereits darauf geschlossen, dass JavaScript aktiviert ist. In diesem Fall sollten Sie javascript:void(0); verwenden. . Verwenden Sie span auch nicht als Links, da dies zunächst semantisch falsch ist.

Die Verwendung von SEO benutzerfreundlichen URL-Routen in Ihrer Anwendung, z. B./Home/Action/Parameters, wird ebenfalls empfohlen. Wenn Sie einen Link zu einer Seite haben, die zuerst ohne JavaScript funktioniert, können Sie die Erfahrung danach verbessern. Verwenden Sie einen echten Link zu einer Arbeitsseite und fügen Sie dann ein Onlick-Ereignis hinzu, um die Präsentation zu verbessern.

Hier ist ein Beispiel. Home/ChangePicture ist ein funktionierender Link zu einem Formular auf einer Seite, das über eine Benutzeroberfläche und standardmäßige HTML-Übermittlungsschaltflächen verfügt. Mit jQueryUI-Schaltflächen sieht es jedoch besser aus, wenn es in einen modalen Dialog eingebunden wird. In beiden Fällen funktioniert es je nach Browser, was die erste Entwicklung für Mobilgeräte befriedigt.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
13
Josh Simerman

Sie können auch einen Hinweis in einen Anker wie diesen schreiben:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

damit der Benutzer weiß, was dieser Link tut.

11
Lukom

Ich würde sagen, der beste Weg ist, einen href-Anker für eine ID zu erstellen, die Sie nie verwenden würden, wie zum Beispiel # Do1Not2Use3This4Id5 oder eine ähnliche ID, bei der Sie zu 100% sicher sind, dass niemand sie verwenden wird und keine Menschen beleidigt.

  1. Javascript:void(0) ist eine schlechte Idee und verstößt gegen die Richtlinien zur Inhaltssicherheit auf CSP-fähigen HTTPS-Seiten https://developer.mozilla.org/en/docs/Security/CSP (danke an @jakub). G)
  2. Mit nur # springt der Benutzer beim Drücken nach oben
  3. Die Seite wird nicht ruiniert, wenn JavaScript nicht aktiviert ist (es sei denn, Sie haben JavaScript-Erkennungscode
  4. Wenn JavaScript aktiviert ist, können Sie das Standardereignis deaktivieren
  5. Sie müssen href verwenden, es sei denn, Sie wissen, wie Sie verhindern können, dass Ihr Browser Text auswählt.

Grundsätzlich hat niemand 5 in diesem Artikel erwähnt, was ich für wichtig halte, da Ihre Website als unprofessionell abschneidet, wenn sie plötzlich Dinge rund um den Link auswählt.

11
Anders M.

Es ist schön, dass Benutzer mit deaktiviertem JavaScript auf Ihre Website zugreifen können. In diesem Fall verweist der href auf eine Seite, die dieselbe Aktion ausführt wie das ausgeführte JavaScript. Andernfalls verwende ich " # " mit einem "return false;", um die Standardaktion (Bildlauf zum Anfang der Seite) zu verhindern, wie andere erwähnt haben .

Das Googeln nach "javascript:void(0)" bietet viele Informationen zu diesem Thema. Einige von ihnen, wie dieses erwähnen Gründe, um NICHT void (0) zu verwenden.

11
mmacaulay

Ich sehe viele Antworten von Leuten, die weiterhin # Werte für href verwenden möchten, daher hier eine Antwort, die hoffentlich beide Lager zufriedenstellt:

A) Ich bin froh, javascript:void(0) als meinen href -Wert zu haben:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) Ich verwende jQuery und möchte # als meinen href -Wert:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Hinweis: Wenn Sie wissen, dass Links nicht dynamisch erstellt werden, verwenden Sie stattdessen die Funktion click:

$('a[href="#"]').click(function(e) {

9
dazbradbury

Auf einer modernen Website sollte die Verwendung von href vermieden werden, wenn das Element nur JavaScript-Funktionen ausführt (kein echter Link).

Warum? Das Vorhandensein dieses Elements teilt dem Browser mit, dass dies ein Link zu einem Ziel ist. Damit zeigt der Browser die Funktion In neuem Tab/Fenster öffnen (wird auch bei Verwendung von Shift + Click ausgelöst). Andernfalls wird dieselbe Seite geöffnet, ohne dass die gewünschte Funktion ausgelöst wird (was zu Frustration des Benutzers führt).

In Bezug auf IE: Ab IE8 funktioniert das Element-Styling (einschließlich Hover), wenn der Doctype festgelegt ist. Andere Versionen von IE brauchen sich keine Sorgen mehr zu machen.

Einziger Nachteil: Durch Entfernen von HREF wird der Tab-Index entfernt. Um dies zu umgehen, können Sie eine als Link gestaltete Schaltfläche verwenden oder mit JS ein tabindex-Attribut hinzufügen.

9
TomDK

Hier ist noch eine wichtige Sache zu beachten. § 508 Einhaltung. Aus diesem Grund ist es meines Erachtens erforderlich, darauf hinzuweisen, dass Sie das Anker-Tag für Bildschirmleseprogramme wie JAWS benötigen, um es durch Tabulatoren fokussieren zu können. Daher ist die Lösung "Verwenden Sie einfach JavaScript und vergessen Sie den Anker von Anfang an" für einige davon keine Option. Das Auslösen des JavaScript in der href ist nur erforderlich, wenn Sie es sich nicht leisten können, dass der Bildschirm wieder nach oben springt. Sie können ein Settimeout für 0 Sekunden verwenden und JavaScript an die Stelle abfeuern lassen, an der Sie den Fokus benötigen, aber auch die Apage springt nach oben und dann zurück.

9
rcof

Ich benutze href = "#" für Links, für die ich ein Dummy-Verhalten haben möchte. Dann benutze ich diesen Code:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

Das heißt, wenn die href einem Hash (* = "#") entspricht, wird das Standard-Link-Verhalten verhindert, sodass Sie weiterhin Funktionen für dieses Verhalten schreiben können, und Ankerklicks werden nicht beeinflusst.

9
Vinny Fonseca

Nur um den Punkt aufzugreifen, den einige der anderen angesprochen haben.

Es ist viel besser, das Ereignis 'onload'a oder $ (' document ') zu binden. Ready {}; Dann können Sie JavaScript direkt in das click-Ereignis einfügen.

Für den Fall, dass JavaScript nicht verfügbar ist, würde ich ein href für die aktuelle URL und möglicherweise einen Anker für die Position des Links verwenden. Die Seite ist weiterhin für Leute ohne JavaScript verwendbar, die keinen Unterschied bemerken.

Wie ich es zur Hand habe, ist hier eine jQuery, die helfen könnte:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
8
Matt Goddard

Ich verstehe aus Ihren Worten, dass Sie einen Link erstellen möchten, um nur JavaScript-Code auszuführen.

Dann sollten Sie bedenken, dass es Leute gibt, die JavaScript in ihren Browsern blockieren.

Wenn Sie diesen Link also wirklich nur zum Ausführen einer JavaScript-Funktion verwenden, sollten Sie ihn dynamisch hinzufügen, damit er nicht einmal angezeigt wird, wenn die Benutzer ihr JavaScript im Browser nicht aktiviert haben und Sie diesen Link nur für verwenden eine JavaScript-Funktion auslösen, die keinen Sinn macht, einen solchen Link zu verwenden, wenn JavaScript im Browser deaktiviert ist.

Aus diesem Grund ist keiner von ihnen gut, wenn JavaScript deaktiviert ist.

Und wenn JavaScript aktiviert ist und Sie diesen Link nur zum Aufrufen einer JavaScript-Funktion verwenden möchten

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

ist weitaus besser als mit

<a href="#" onclick="myJsFunc();">Link</a>

weil href = "#" bewirkt, dass die Seite Aktionen ausführt, die nicht benötigt werden.

Ein weiterer Grund, warum <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> besser ist als <a href="#" onclick="myJsFunc();">Link</a>, ist, dass JavaScript für die meisten Browser als Standard-Skriptsprache verwendet wird. Verwendet als Beispiel Internet Explorer ein onclick-Attribut, um den Typ der verwendeten Skriptsprache zu definieren. Sofern keine andere gute Skriptsprache angezeigt wird, wird JavaScript auch von Internet Explorer als Standard verwendet. Wenn jedoch eine andere Skriptsprache javascript: verwendet wird, kann Internet Explorer erkennen, welche Skriptsprache verwendet wird.

In Anbetracht dessen würde ich es vorziehen, zu trainieren

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

genug, um es zur Gewohnheit zu machen und benutzerfreundlicher zu sein, füge bitte diese Art von Links in den JavaScript-Code ein:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
8
Berker Yüceer

Sie können die href verwenden und alle Links entfernen, die nur Hashes enthalten:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
8
vol7ron

Warum nicht nutzen? Dies führt keinen Bildlauf nach oben durch.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
8
AlxGol

Idealerweise sollten Sie eine echte URL als Fallback für Benutzer ohne JavaScript haben.

Wenn dies keinen Sinn ergibt, verwenden Sie # als href Attribut. Ich verwende das onclick -Attribut nicht gern, da es JavaScript direkt in HTML einbettet. Eine bessere Idee wäre, eine externe JS-Datei zu verwenden und dann den Ereignishandler zu diesem Link hinzuzufügen. Sie können dann das Standardereignis verhindern, sodass sich die URL nicht ändert und # angehängt wird, nachdem der Benutzer darauf geklickt hat.

7
Peter

Verwenden Sie in völliger Übereinstimmung mit dem allgemeinen Gefühl void(0), wenn Sie es benötigen, und verwenden Sie eine gültige URL, wenn Sie es benötigen.

Mit RL rewriting können Sie URLs erstellen, die nicht nur das tun, was Sie möchten, wenn JavaScript deaktiviert ist, sondern auch genau angeben, was sie tun sollen.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

Auf der Serverseite müssen Sie nur die URL und die Abfragezeichenfolge analysieren und tun, was Sie wollen. Wenn Sie schlau sind, können Sie zulassen, dass das serverseitige Skript auf Ajax- und Standardanforderungen unterschiedlich reagiert. So erhalten Sie einen übersichtlichen, zentralisierten Code, der alle Links auf Ihrer Seite verwaltet.

Tutorials zum Umschreiben von URLs

Vorteile

  • Wird in der Statusleiste angezeigt
  • Einfaches Upgrade auf Ajax über den On-Click-Handler in JavaScript
  • Kommentiert sich praktisch
  • Verhindert, dass Ihre Verzeichnisse mit Einweg-HTML-Dateien übersät werden

Nachteile

  • Sollte immer noch event.preventDefault () in JavaScript verwenden
  • Recht komplexes Path-Handling und URL-Parsing auf der Serverseite.

Ich bin sicher, es gibt Tonnen mehr Nachteile. Fühlen Sie sich frei, um sie zu diskutieren.

7
user394888

Wenn Sie ein <a> -Element verwenden, verwenden Sie einfach Folgendes:

<a href="javascript:myJSFunc();" />myLink</a>

Persönlich würde ich stattdessen später einen Event-Handler mit JavaScript anhängen (mit attachEvent oder addEventListener oder vielleicht auch <hier Ihr bevorzugtes JavaScript-Framework einfügen>).

7
Pablo Cabrera

Verpassen Sie nicht die Tatsache, dass Ihre URL möglicherweise erforderlich ist - ein Klick wird ausgelöst, bevor der Verweis befolgt wird. Manchmal müssen Sie also clientseitige Vorgänge ausführen, bevor Sie die Seite verlassen.

7
nathaniel

Wenn Sie verwenden einen Link, um nur einen JavaScript-Code auszuführen (anstatt einen Bereich wie D4V360 zu verwenden, der dringend empfohlen wird), tun Sie einfach Folgendes:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Wenn Sie einen Link mit OnClick für die Navigation verwenden, verwenden Sie href = "#" nicht als Ersatz, wenn JavaScript deaktiviert ist. Es ist normalerweise sehr ärgerlich, wenn der Benutzer auf den Link klickt. Geben Sie stattdessen denselben Link an, den der OnClick-Handler nach Möglichkeit bereitstellen würde. Wenn Sie das nicht können, überspringen Sie den Klick und verwenden Sie einfach einen JavaScript-URI in der href.

6
Shadow2531

Ich bevorzuge es nachdrücklich, mein JavaScript so weit wie möglich von meinem HTML-Markup fernzuhalten. Wenn ich <a> als Click-Event-Handler verwende, würde ich die Verwendung von <a class="trigger" href="#">Click me!</a> empfehlen.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Es ist sehr wichtig zu beachten, dass viele Entwickler der Meinung sind, dass die Verwendung von Anker-Tags für Click-Event-Handler nicht gut ist. Sie würden es vorziehen, wenn Sie einen <span> oder <div> mit etwas CSS verwenden, das cursor: pointer; hinzufügt. Dies ist eine Frage, wenn viel diskutiert wird.

6
Jesse Atkinson

Sie sollten nicht verwenden inline onclick="something();" in Ihrem HTML, um es nicht mit bedeutungslosem Code abzufragen; Alle Klickbindungen müssen in Javascript-Dateien (* .js) festgelegt werden.

Stellen Sie die Bindung wie folgt ein: $('#myAnchor').click(function(){... **return false**;}); oder $('#myAnchor').bind('click', function(){... **return false**;});

Dann haben Sie eine saubere HTML-Datei, die einfach zu laden (und SEO-freundlich) ist, ohne Tausende von href="javascript:void(0);" und nur href="#".

6
G. Ghez

Hier ist aus Gründen der Vollständigkeit eine weitere Option, die verhindert, dass der Link etwas tut, auch wenn JavaScript deaktiviert ist und es kurz ist :)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

Wenn die ID nicht auf der Seite vorhanden ist, wird der Link nichts tun.

Generell stimme ich der Antwort von Aaron Wagner zu, der JavaScript-Link sollte mit JavaScript-Code in das Dokument eingefügt werden.

3
Timo Huovinen

Javascript: void(0); ist ungültig bis zum Nullwert [Nicht zugewiesen], was bedeutet, dass Ihr Browser zu NULL wechselt, um DOM und Fenster zurück auf false.
• Der '#' folgt nicht dem DOM oder Fenster in Javascript. was bedeutet, dass das '#' Zeichen in anchor href ein LINK ist. Verknüpfen Sie mit derselben aktuellen Richtung.

2
SchoolforDesign

Bearbeitet am 2019 Januar

In HTML5 ist die Verwendung eines Elements ohne href-Attribut gültig. Es wird als "Platzhalter-Hyperlink" betrachtet

Wenn das a-Element kein href-Attribut hat, stellt das Element einen Platzhalter dar, für den ein Link, der nur aus dem Inhalt des Elements besteht, platziert worden wäre, wenn er relevant gewesen wäre.

Beispiel:

_<a>previous</a>
_

Wenn Sie danach etwas anderes machen wollen:

1 - Wenn Ihr Link nirgendwo hingeht, verwenden Sie kein _<a>_ -Element. Verwenden Sie einen _<span>_ oder einen anderen geeigneten Code und fügen Sie CSS _:hover_ hinzu, um ihn nach Ihren Wünschen zu gestalten.

2 - Verwenden Sie die javascript:void(0) OR _javascript:undefinedOR _javascript:;_, wenn Sie roh, präzise und schnell sein möchten.

2
Lyes CHIOUKH

Sie können javascript: void (0) hier verwenden, anstatt # zu verwenden, um die Weiterleitung des Ankertags zum Header-Bereich zu stoppen.

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
0
Javed Khan

Das einfachste und von allen am häufigsten verwendete ist Javascript: void (0) Sie können es verwenden, anstatt # zu verwenden, um Tag-Weiterleitung zum Header-Bereich zu stoppen =.

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}
0
Dev pokhariya