problem - was bedeutet javascript void 0




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

Im Folgenden sind zwei Methoden zum Erstellen eines Links aufgeführt, 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>


Der erste, idealerweise mit einem echten Link für den Fall, dass der Benutzer JavaScript deaktiviert hat. Stellen Sie nur sicher, dass Sie false zurückgeben, 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 dieser Weg:

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

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


Die Verwendung von # macht einige lustige Bewegungen, daher würde ich empfehlen, #self zu verwenden, wenn Sie beim Schreiben von JavaScript bla, bla, sparen wollen JavaScript bla, bla, #self


Ich benutze javascript:void(0) .

Drei Gründe. Die Verwendung von # in einem Team von Entwicklern zu fördern, führt unweigerlich dazu, dass einige den Rückgabewert der so genannten Funktion verwenden:

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

Dann vergessen sie jedoch, return doSomething() im onclick zu verwenden und benutzen einfach doSomething() .

Ein zweiter Grund für die Vermeidung von # ist, dass die endgültige return false; wird nicht ausgeführt, wenn die aufgerufene Funktion einen Fehler ausgibt. Daher müssen die Entwickler auch daran denken, Fehler in der aufgerufenen Funktion entsprechend zu behandeln.

Ein dritter Grund ist, dass es Fälle gibt, in denen die onclick Ereigniseigenschaft 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 Befestigungsmethode programmieren zu müssen. Daher onclick mein onclick (oder irgendetwas) in HTML-Markup folgendermaßen aus:

onclick="someFunc.call(this)"

ODER

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

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

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

Verwenden Sie href="#" und stellen Sie sicher, dass onclick immer return false; onclick return false; Am Ende gibt eine aufgerufene Funktion keinen Fehler aus. Wenn Sie eine Funktion dynamisch an die Eigenschaft onclick , müssen Sie sicherstellen, dass der Fehler nicht onclick , sondern false zurückgibt.

ODER

Verwenden Sie href="javascript:void(0)"

Die zweite ist eindeutig viel einfacher zu kommunizieren.


Ich benutze das Folgende

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

stattdessen

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

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 stimme anderen Vorschlägen zu, die besagen, dass Sie die reguläre URL im Attribut href , und rufen Sie dann in JavaScript die JavaScript-Funktion auf. Der Fehler ist, dass sie nach dem Aufruf automatisch return false zurückgeben.

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

Es gibt eine sehr einfache Lösung. Lassen Sie die Funktion true wenn sie richtig 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 doSomething() . Wenn dies funktioniert, wird true , dh es wird negiert ( false ) und der path/to/some/URL wird nicht aufgerufen. Wenn die Funktion false (beispielsweise unterstützt der Browser etwas, das innerhalb der Funktion verwendet wird, oder wenn irgendetwas anderes schief geht), wird der Wert in true negiert und der path/to/some/URL wird aufgerufen.


Idealerweise würden Sie das tun:

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

Oder, noch besser, Sie haben den Standard-Aktionslink im HTML-Code, und Sie fügen dem Element nach dem Rendern des DOM unauffällig das Ereignis "onclick" zum Element hinzu. So stellen Sie sicher, dass JavaScript nicht vorhanden / verwendet wird Bitten Sie unnötige Event-Handler, Ihren Code zu durchforsten und Ihren tatsächlichen Inhalt möglicherweise zu verschleiern (oder zumindest abzulenken).


Weder wenn du mich fragst;

Wenn Ihr "Link" nur zum Ausführen von JavaScript-Code dient, kann er nicht als Link verwendet werden. eher ein Stück Text mit einer daran gekoppelten JavaScript-Funktion. Ich würde empfehlen, ein <span> -Tag zu verwenden, an das ein onclick handler angehängt ist, sowie einige grundlegende CSS-Elemente, 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>


Wenn 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 Onclick verhindern Eventhandler. Auf diese Weise wird die Funktion mit aktiviertem JavaScript ausgeführt, und diejenigen mit deaktiviertem JavaScript werden zu einer entsprechenden Seite (oder einem geeigneten Ort innerhalb derselben Seite) springen, anstatt nur auf den Link zu klicken und nichts passiert zu haben.


# 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 sich stets um eine vorsichtige Verschlechterung bemühen (für den Fall, dass der Benutzer kein JavaScript aktiviert hat ... und wenn es sich um Spezifikationen und Budget handelt). Die Verwendung von JavaScript-Attributen und -Protokollen direkt in HTML wird als fehlerhaft angesehen.


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

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


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

Die Verwendung von href = "#" scrollt die Seite nach oben; 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 stylen Sie es mit CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Ich würde ... benutzen:

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

Gründe dafür:

  1. Dies macht es hrefeinfach, Suchmaschinen brauchen es. Wenn Sie etwas anderes verwenden (z. B. eine Zeichenfolge), kann dies zu einem 404 not foundFehler führen.
  2. Wenn sich die Maus über dem Link befindet, wird nicht angezeigt, dass es sich um ein Skript handelt.
  3. Bei Verwendung return false;springt die Seite nicht nach oben oder unterbricht die backSchaltfläche.

Ich würde sagen, der beste Weg ist, eine ID zu einer ID zu machen, die Sie nie verwenden würden, wie # Do1Not2Use3This4Id5 oder einer ähnlichen ID, die Sie zu 100% sicher sind, dass niemand sie verwenden wird und keine Personen beleidigt.

  1. Javascript:void(0)ist eine schlechte Idee und verstößt gegen die Content-Security-Richtlinie auf CSP-fähigen HTTPS-Seiten https://developer.mozilla.org/de/docs/Security/CSP (Dank an @ jakub.g)
  2. Mit nur #wird der Benutzer nach oben springen, wenn er gedrückt wird
  3. Ruiniert die Seite nicht, wenn JavaScript nicht aktiviert ist (es sei denn, Sie haben JavaScript, das Code erkennt.)
  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 einen Text auswählt. (Wenn Sie mit 4 wissen, wird das entfernt, was den Browser daran hindert, Text auszuwählen).

Grundsätzlich hat niemand 5 in diesem Artikel erwähnt, was meiner Meinung nach wichtig ist, da Ihre Website als unprofessionell erscheint, wenn sie plötzlich beginnt, Dinge rund um den Link auszuwählen.


Wenn ich mehrere Faux-Links habe, gebe ich ihnen lieber eine Klasse von "No-Links".

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 Hash-Tags nicht gern, wenn sie nicht für Anker verwendet werden, und ich mache das 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 einfach, einen Link zu verwenden, und wickle einfach etwas in einem Bereich ein und benutze das als eine Möglichkeit, JavaScript-Code zu aktivieren, wie etwa ein Popup oder ein Inhalt.


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

Ich stimme Herrn D4V360 zu, der vorschlug, dass Sie, obwohl Sie das Ankertag 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 passender.


Ich wähle "use" javascript:void(0), weil mit dieser Einstellung ein Rechtsklick zum Öffnen des Inhaltsmenüs verhindert werden kann. Ist javascript:;aber kürzer und macht dasselbe.


Im Grunde umschreibe ich diesen praktischen Artikel mit progressiver Verbesserung . Die kurze Antwort lautet, dass Sie niemals verwenden javascript:void(0);oder #wenn Ihre Benutzeroberfläche nicht bereits darauf hingewiesen hat, dass JavaScript aktiviert ist. In diesem Fall sollten Sie dies verwendenjavascript:void(0); . Verwenden Sie span nicht als Links, da dies semantisch falsch ist.

Die Verwendung von SEO freundlichen URL-Routen in Ihrer Anwendung, z. B. / Home / Action / Parameters, ist ebenfalls eine bewährte Methode. Wenn Sie einen Link zu einer Seite haben, die zuerst ohne JavaScript funktioniert, können Sie das Erlebnis später 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 einer Benutzeroberfläche und Standard-HTML-Übergabeschaltflächen, sieht jedoch besser aus, wenn es mit jQueryUI-Schaltflächen in ein modales Dialogfeld eingefügt wird. Beide Möglichkeiten funktionieren, abhängig vom Browser, der die mobile Erstentwicklung zufriedenstellt.

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

Wenn Sie AngularJS , können Sie Folgendes verwenden:

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

Was nichts tut.

In Ergänzung

  • Sie gelangen nicht zum Anfang der Seite, wie bei (#).
    • Daher müssen Sie nicht explizit falsemit JavaScript zurückkehren
  • Es ist kurz und prägnant

Wenn Sie also einige JavaScript-Dinge mit einem <a />Tag erledigen, und wenn Sie dies ebenfalls tun href="#", können Sie am Ende des Ereignisses return false hinzufügen (im Falle einer Inline-Ereignisbindung) :

<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 falsch, um dies zu erreichen (funktioniert aber gut) . Wenn für das Navigieren auf der Seite kein Element erstellt wird, dem JavaScript-Elemente zugeordnet sind, sollte es sich nicht um ein <a>Tag handeln.

Sie können <button />stattdessen einfach a verwenden, um Dinge oder andere Elemente wie b, span oder was auch immer dorthin passt, da es Ihnen erlaubt ist, Ereignisse zu allen Elementen hinzuzufügen.

Es gibt also einen Vorteil, den es zu nutzen gilt <a href="#">. Wenn Sie dies tun, erhalten Sie 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, haben Sie einen Vorteil. Das muss ich nicht tun.

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





href