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

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

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>

Ich benutze javascript:void(0).

Drei Gründe. Die Förderung der Verwendung #in einem Entwicklerteam führt zwangsläufig dazu, dass einige den Rückgabewert der so genannten Funktion verwenden:

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

Aber dann vergessen sie, return doSomething()im Onclick zu verwenden und nur zu verwenden doSomething().

Ein zweiter Grund zur Vermeidung #ist, dass das Finale 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 onclickEreigniseigenschaft 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 Anhangsmethode codieren zu müssen. Daher onclicksieht mein (oder irgendetwas anderes) HTML-Markup folgendermaßen aus:

onclick="someFunc.call(this)"

ODER

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

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

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

Verwenden Sie href="#", stellen Sie sicher , dass am Ende onclickimmer enthalten ist return false;, dass eine aufgerufene Funktion keinen Fehler auslöst. Wenn Sie eine Funktion dynamisch an die onclickEigenschaft anhängen, stellen Sie sicher, dass sie nicht nur einen Fehler auslöst, sondern auch zurückgibt false.

ODER

Verwenden href="javascript:void(0)"

Der zweite ist eindeutig viel einfacher zu kommunizieren.

Weder.

Wenn Sie eine sinnvolle URL haben können, verwenden Sie diese als HREF. Der Onclick 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 Klickereignishandlern in das Dokument einfügen.

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

Schauen Sie sich Unauffälliges JavaScript und Progressive Enhancement (beide Wikipedia) an.

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

1. Es fördert die Praxis von aufdringlichem JavaScript - das sich als schwierig zu warten und schwer zu skalieren herausgestellt hat. Mehr dazu in Unauffälligem JavaScript .

2. Sie verbringen Ihre Zeit damit, unglaublich übermäßig ausführlichen Code zu schreiben - was Ihrer Codebasis nur sehr wenig (wenn überhaupt) zugute kommt.

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

Der unauffällige JavaScript-Weg

Hab einfach überhaupt kein hrefAttribut! Bei einem guten CSS-Reset wird der fehlende Standardcursorstil behoben, sodass dies kein Problem darstellt. Fügen Sie dann Ihre JavaScript-Funktionalität mithilfe eleganter und unauffälliger Best Practices hinzu, die besser zu warten sind, da Ihre JavaScript-Logik in JavaScript und nicht in Ihrem Markup 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 der JavaScript-Anwendungsarchitektur in großem Maßstab

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

Ein skalierbares Beispiel für eine Backbox.js- Komponente mit Blackbox finden Sie in diesem funktionierenden Beispiel für jsfiddle hier . Beachten Sie, wie wir unauffällige JavaScript-Praktiken verwenden und in einer winzigen Menge Code eine Komponente haben, die ohne Nebenwirkungen oder Konflikte zwischen den verschiedenen Komponenteninstanzen mehrmals auf der Seite wiederholt werden kann. Tolle!

Anmerkungen

• Wenn Sie das hrefAttribut für das aElement weglassen, kann das Element nicht über die tabTastaturnavigation aufgerufen werden. Wenn Sie möchten, dass auf diese Elemente über den tabSchlüssel zugegriffen werden kann, können Sie das tabindexAttribut festlegen oder buttonstattdessen Elemente verwenden. Sie können Schaltflächenelemente einfach so gestalten, dass sie wie normale Links aussehen, wie in der Antwort von Tracker1 erwähnt .

• Das Weglassen des hrefAttributs für das aElement führt dazu, dass Internet Explorer 6 und Internet Explorer 7 das a:hoverStyling nicht übernehmen . Aus diesem Grund haben wir a.hoverstattdessen einen einfachen JavaScript-Shim hinzugefügt, um dies zu erreichen . Was vollkommen in Ordnung ist, als ob Sie kein href-Attribut und keine anmutige Verschlechterung haben, dann funktioniert Ihr Link sowieso nicht - und Sie haben größere Probleme, über die Sie sich Sorgen machen müssen.

• Wenn Sie möchten, dass Ihre Aktion weiterhin mit deaktiviertem JavaScript funktioniert, verwenden Sie ein aElement mit einem hrefAttribut, das auf eine URL verweist, die die Aktion manuell ausführt, anstatt über eine Ajax-Anforderung oder was auch immer der richtige Weg sein sollte. Wenn Sie dies tun, möchten Sie sicherstellen, dass Sie event.preventDefault()bei Ihrem Klick einen Aufruf ausführen, um sicherzustellen, dass beim Klicken auf die Schaltfläche nicht der Link folgt. Diese Option wird als würdevolle Verschlechterung bezeichnet.

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

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

Ich würde ehrlich gesagt auch nicht vorschlagen. Ich würde ein <button></button>für dieses Verhalten stilisiertes 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 und nicht das onclickAttribut auf dem Element-Tag zu verwenden. Das einzige Problem ist der Pseudo-3D-Texteffekt in älteren IEs, der nicht deaktiviert werden kann.

Wenn Sie ein A-Element verwenden MÜSSEN , verwenden Sie es javascript:void(0);aus den bereits genannten Gründen.

• 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 (Onclick-Würfe). Vermeiden Sie es, es sei denn, es handelt sich um ein geeignetes Fall-Through-Verhalten, und Sie möchten den Navigationsverlauf ändern.

HINWEIS: Sie können das 0durch eine Zeichenfolge ersetzen, die javascript:void('Delete record 123')als zusätzlicher Indikator dienen kann, der anzeigt, was der Klick tatsächlich bewirkt.

Die erste, idealerweise mit einem echten Link, falls der Benutzer JavaScript deaktiviert hat. Stellen Sie einfach sicher, dass false zurückgegeben wird, um zu verhindern, dass das Klickereignis ausgelöst wird, wenn JavaScript ausgeführt wird.

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

Wenn Sie Angular2 verwenden, funktioniert dies folgendermaßen:

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

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

Weder wenn du mich fragst;

Wenn Ihr "Link" ausschließlich dazu dient, JavaScript-Code auszuführen, gilt er nicht als Link. eher ein Textstück mit einer daran gekoppelten JavaScript-Funktion. Ich würde empfehlen, eine zu verwenden<span> Tag mit einem onclick handlerangehängten und einigen grundlegenden CSS zu verwenden, um einen Link zu imitieren. Links werden für die Navigation erstellt. Wenn Ihr JavaScript-Code nicht für die Navigation vorgesehen ist, sollte er kein <a>Tag sein.

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>

Idealerweise würden Sie dies tun:

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

Oder, noch besser, Sie hätten den Standard-Aktionslink im HTML-Code und würden das onclick-Ereignis nach dem Rendern des DOM unauffällig über JavaScript zum Element hinzufügen, um sicherzustellen, dass Sie es nicht tun, wenn JavaScript nicht vorhanden / verwendet ist Lassen Sie Ihren Code von nutzlosen Ereignishandlern durchsuchen und möglicherweise Ihren tatsächlichen Inhalt verschleiern (oder zumindest davon ablenken).

Die Verwendung #macht nur einige lustige Bewegungen, daher würde ich die Verwendung empfehlen, #selfwenn Sie beim Schreiben von sparen möchten JavaScript bla, bla,.

Ich benutze folgendes

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

stattdessen

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

Ich stimme den Vorschlägen an anderer Stelle zu, wonach Sie die reguläre URL im hrefAttribut verwenden und dann bei einem Klick eine JavaScript-Funktion aufrufen sollten. Der Fehler ist, dass sie return falsenach dem Anruf automatisch hinzufügen .

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

Es gibt eine sehr einfache Lösung. Lassen Sie die Funktion zurückkehrentrue wenn sie ordnungsgemäß 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 doSomething()Funktion negiere . Wenn es funktioniert, wird es zurückkehren true, also wird es negiert ( false) und das path/to/some/URLwird nicht aufgerufen. Wenn die Funktion zurückgegeben wird false(z. B. unterstützt der Browser nichts, was in der Funktion verwendet wird, oder wenn etwas anderes schief geht), wird sie negiert trueund path/to/some/URLaufgerufen.

#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 kein JavaScript aktiviert hat ... und wenn es mit Spezifikationen und Budget ausgestattet ist). Es wird auch als schlechte Form angesehen, JavaScript-Attribute und -Protokolle direkt in HTML zu verwenden.

Ich empfehle , mit einem <button>Element statt, vor allem wenn das Steuerelement eine Änderung der Daten bewirken soll. (So ​​etwas wie ein POST.)

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

Sofern Sie den Link nicht mit JavaScript schreiben (damit Sie wissen, dass er im Browser aktiviert ist), sollten Sie idealerweise einen geeigneten Link für Personen bereitstellen, die mit deaktiviertem JavaScript surfen, und dann die Standardaktion des Links in Ihrem Onclick verhindern Event-Handler. Auf diese Weise führen Benutzer mit aktiviertem JavaScript die Funktion aus und Benutzer mit deaktiviertem JavaScript springen zu einer geeigneten Seite (oder Position auf derselben Seite), anstatt nur auf den Link zu klicken und nichts zu tun.

Auf jeden Fall ist hash ( #) besser, weil es in JavaScript ein Pseudoschema ist:

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 dazu dient, JavaScript auszuführen, nicht wirklich "ein Link", es sei denn, Sie senden einen Benutzer an einen vernünftigen Anker auf der Seite (nur # wird nach oben gesendet), wenn etwas schief geht. Sie können einfach das Erscheinungsbild der Verknüpfung mit dem Stylesheet simulieren und href überhaupt vergessen.

In Bezug auf den Vorschlag von Cowgod, insbesondere dies: ...href="javascript_required.html" onclick="...Dies ist ein guter Ansatz, unterscheidet jedoch nicht zwischen den Szenarien "JavaScript deaktiviert" und "Onclick schlägt fehl".

Ich gehe normalerweise für

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

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

Ich würde ... benutzen:

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

Gründe dafür:

1. Dies macht die hrefeinfachen Suchmaschinen es brauchen. Wenn Sie etwas anderes verwenden (z. B. eine Zeichenfolge), kann dies dazu führen, dass a404 not found Fehler führen.
2. Wenn Sie mit der Maus über den Link fahren, wird nicht angezeigt, dass es sich um ein Skript handelt.
3. Bei Verwendung return false;springt die Seite nicht nach oben oder bricht die backSchaltfläche.

Ich wähle "Verwenden" javascript:void(0), da dies das Klicken mit der rechten Maustaste verhindern könnte, um das Inhaltsmenü zu öffnen. Ist javascript:;aber kürzer und macht das gleiche.

Also, wenn Sie einige JavaScript Dinge mit tun <a />Tag und wenn Sie setzen href="#"auch, können Sie hinzufügen return false am Ende der Veranstaltung (im Fall von Inline - Ereignisbindung) 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 jedoch gut) . Wenn kein Element zum Navigieren auf der Seite erstellt wurde und mit dem einige JavaScript-Elemente verknüpft sind, sollte es kein Element sein<a> Tag sein.

Sie können <button />stattdessen einfach a verwenden, um Dinge oder andere Elemente wie b, span oder was auch immer nach Ihren Wünschen zu tun, zu tun, da Sie Ereignisse zu allen Elementen hinzufügen dürfen.

So gibt es einen Vorteil zu nutzen <a href="#">. Sie erhalten dabei standardmäßig den Cursorzeiger für dieses Element a href="#". Dafür denke ich, dass Sie CSS dafür verwenden können, cursor:pointer;was auch dieses Problem löst.

Und am Ende, wenn Sie das Ereignis aus dem JavaScript-Code selbst binden, können Sie dies tun event.preventDefault(), wenn Sie ein <a>Tag verwenden. Wenn Sie jedoch kein <a>Tag dafür verwenden, erhalten Sie einen Vorteil, den Sie nicht haben. Ich muss das nicht tun.

Wenn Sie sehen, ist es besser, kein Tag für solche Dinge zu verwenden.

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 gestalten Sie es mit CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Es wäre besser, jQuery zu verwenden.

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

und lassen Sie beide href="#"und weghref="javascript:void(0)" .

Das Anker-Tag-Markup ist wie folgt

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

Einfach genug!

Wenn Sie 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 bei (#) an den Anfang der Seite.
  • Daher müssen Sie nicht explizit falsemit JavaScript zurückkehren
• Es ist kurz und prägnant

Wenn dies nicht der hrefFall ist, gibt es möglicherweise keinen Grund, ein Ankertag zu verwenden.

Sie können fast jedem Element Ereignisse (Klicken, Schweben usw.) hinzufügen. Warum also nicht einfach ein spanoder ein verwenden div?

Und für Benutzer mit deaktiviertem JavaScript: Wenn es keinen Fallback gibt (z. B. eine Alternative href), sollten sie dieses Element zumindest überhaupt nicht sehen und damit interagieren können, unabhängig davon, ob es sich um ein <a>oder ein <span>Tag handelt.

Normalerweise sollten Sie immer einen Fallback-Link haben, um sicherzustellen, dass Clients mit deaktiviertem JavaScript noch einige Funktionen haben. Dieses Konzept wird als unauffälliges JavaScript bezeichnet.

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 angesprochen, search.phpwährend Ihre Betrachter mit JavaScript Ihre erweiterten Funktionen anzeigen.

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 benutze selten onClick und andereon Ereignisse direkt in HTML.

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

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

Weisen Sie die Funktion dann .linkmit einem Skript zu, das in den Textkörper und kurz vor dem </body>Tag oder in ein externes JavaScript-Dokument eingeschlossen ist.

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

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

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

Verwenden Sie für dynamisch erstellte Elemente, die mit dynamisch erstellten Elementen erstellt werden, Folgendes:

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

Anschließend 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 von oben.

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

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

Es geht um die Notwendigkeit, false zurückzugeben. Ich mag die #Option nicht, weil sie, wie erwähnt, den Benutzer an den Anfang der Seite bringt. Wenn Sie den Benutzer an einen anderen Ort senden müssen, wenn JavaScript nicht aktiviert ist (was bei mir selten vorkommt, aber eine sehr gute Idee ist), funktioniert die von Steve vorgeschlagene Methode hervorragend.

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

Zuletzt können Sie verwenden, javascript:void(0)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, auf das der Benutzer jedoch nicht klicken kann.

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 den HTML-Code ist der Link einfach

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

Ich mag es nicht, Hash-Tags zu verwenden, es sei denn, sie werden für Anker verwendet, und ich mache das oben genannte nur, wenn ich mehr als zwei Faux-Links habe, sonst gehe ich mit Javascript: void (0).

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

Normalerweise vermeide ich es, überhaupt keinen Link zu verwenden, und wickle einfach etwas in einen Zeitraum ein und verwende dies, um JavaScript-Code wie ein Popup oder eine Inhaltsoffenbarung zu aktivieren.

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

Ich stimme Herrn D4V360 zu, der vorgeschlagen hat, dass Sie, obwohl Sie das Ankertag verwenden, hier keinen wirklichen Anker haben. Alles, was Sie haben, ist ein spezieller Abschnitt eines Dokuments, der sich etwas anders verhalten sollte. Ein <span>Tag ist weitaus geeigneter.

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

Grundsätzlich paraphrasiere ich diesen praktischen Artikel mit progressiver Verbesserung . Die kurze Antwort lautet, dass Sie niemals verwenden javascript:void(0);oder es #sei denn, Ihre Benutzeroberfläche hat bereits gefolgert, dass JavaScript aktiviert ist. In diesem Fall sollten Sie verwendenjavascript:void(0); . Verwenden Sie span auch nicht als Links, da dies zunächst semantisch falsch ist.

Die Verwendung von SEO- freundlichen URL-Routen in Ihrer Anwendung, wie z. B. / Home / Action / Parameters, ist ebenfalls eine gute Vorgehensweise. 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 mit Benutzeroberfläche und Standard-HTML-Senden-Schaltflächen. Es sieht jedoch besser aus, wenn es in einen modalen Dialog mit jQueryUI-Schaltflächen eingefügt wird. In beiden Fällen funktioniert dies je nach Browser, der die erste mobile Entwicklung erfüllt.

<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>