Browser native klick vor dom: loaded

Ich habe ein Problem mit Cross-Browser native Ereignisse vs Callback-Ereignisse.Browser native klick vor dom: loaded

Ich habe einen HTML-Link "Klicken Sie mich" mit einem gegebenen href="". Unter dom:loaded füge ich eine Funktion an diesen Link an (um Ajax Stuff zu machen).

JavaScript-Code wird am Ende der Seite geladen, um YSlow Recommandation zu folgen.

Ausgabe:

Wenn Sie wirklich schnell diese Seite laden (F5) dann auf den Link klicken dann

die alert() nicht
der Link folgt (Neuladen der Seite aufgerufen wird)

Es passiert, wenn der Server nachläuft. Tatsächlich ist die Seite noch nicht fertig geladen und der Browser führt den Code aus.

Demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    </head> 
    <body> 

    <a href="#toolate" id="action">Click Me</a> 

    <!-- According to YSlow Recommandation load at the bottom --> 
    <script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script> 
    <script> 
     /* <![CDATA[ */ 
     document.observe('dom:loaded', function() { 
     $('action').observe('click', function(event){ alert("click"); Event.stop(event); }); 
     }); 
     /* ]]> */ 
    </script> 
    </body> 
</html>

Turn Around:

A turn around ist onClick="return false;" hinzuzufügen:

<a href="#toolate" id="action" onClick="return false;">Click Me</a>

Es ist für Lags funktioniert, aber nicht für einen schnellen Klick. Und Ich mag nicht diese Art von turn around, weil mein Ziel, die onclick auf allen <a href="">

Mit freundlichen Grüßen

Quelle

2009-08-03 Jean-Philippe Encausse

können Sie einfach die Kontrolle deaktivieren und dann i aktivieren t wenn das Dokument fertig geladen ist? Mit anderen Worten: Wenn Sie den Klick vor dem Laden der Seite verarbeiten können, lassen Sie keine Klicks zu, bis die Seite geladen wird. –

Stimmen Sie zu, aber wie sagen Sie zum Browser: "Folgen Sie ahref nicht, bis Dokument fertig geladen wird"? Sie können JavaScript verwenden, aber der Engineer hat noch nicht begonnen. –

Ich habe eine Demo hinzugefügt: http://files.getdropbox.com/u/255810/Jalios/Demo/Shield/shield.html –

Wir haben viele Tests auf unserem CMS in vielen Browsern durchgeführt.

nach Geschwindigkeit sortiert:

JavaScript, bevor ein nicht ausführen kann schnell wirklich
klicken Onclick = "return false" funktioniert in den meisten Fällen
JavaScript tun 2.) Beiladen ist zu langsam konnte aber
DIV enought werden unter Verwendung als Abschirmung andere Probleme bringt und ist keine gute Wahl

Quelle

2012-08-03 19:44:57

zu entfernen ist, könnten Sie in aussehen:

JQuery hat eine handliche kleine Funktion dass startet Ihr Javascript, sobald das Document Object Model ist fertig ... was passiert, bevor die Seite fertig geladen hat.

$(document).ready(function(){ // 
Your code here... 
});

via

könnten Sie stellen auch eine große behinderte div vor allem während der Seite zu verbieten wird geladen, aber ich würde es nicht empfehlen.

nicht sicher, ob ich Ihre Frage richtig verstanden habe, lassen Sie mich wissen, ob ich nicht

tat

Quelle

2009-08-03 16:10:00 marcgg

Meine Funktion muss möglicherweise mit dem DOM arbeiten, das bereit sein sollte. Auf dem Beispiel, wenn ein onClick auf nicht aufgerufen wird, wenn Benutzer schnell klicken. Javascript Engine ist nicht bereit Ich denke, Wir haben versucht, die große DIV Shield-Technik, aber es ist ein wenig Cludge;) Ich dachte, es wäre ein häufiges Problem, aber möglicherweise gibt es keine "saubere" Lösung. –

-1

Es scheint, wie Sie die Dinge ziemlich gut in der Hand, und alle sind Sie auf der Suche zu tun ist, um einige Links zu erstellen, die zu tun nichts in Bereichen, in denen graziöse Degradierung nicht möglich ist.

In diesen Fällen schlage ich einen Link mit folgendem Format:

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

Dieser Link funktionell mit Javascript aktiviert oder deaktiviert ist absolut nichts tun soll.

Wichtige Hinweise

Die Zahl Null im leeren Raum ist unbedingt erforderlich. Internet Explorer wird sich sonst beschweren.
Die Verwendung von "javascript: void (0);" wird von Microsoft dringend abgeraten, weil seltsame Dinge passieren können. Um die Mehrzahl der Fehler zu vermeiden, wickeln Sie nichts als Text in Ihre void (0) -Links ein.
Bevor Sie eine Entscheidung treffen, sollten Sie sorgfältig überlegen, ob Sie "javascript: void (0);" ist wirklich eine bessere Lösung als das Hinzufügen eines onclick, der falsch zurückgibt.

auf das Attribut href entfernen:

das href Attribut von einem Link zu entfernen ist gültiges XHTML. Obwohl es ein gültiges XHTML-Format ist, verliert Ihr Link automatisch das Link-Styling. Keine Unterstreichung mehr, keine Farben mehr, kein Hover mehr und keine automatische Farbänderung mehr, wenn die Verbindung besucht wird.

Sie können den Mangel an Stilen nicht mit CSS beheben, da die Unterstützung von: hover in Internet Explorer nicht ausreicht.

Quelle

2009-08-05 14:35:10 coderjoe

Danke für deine Antwort. Es ist gut zu wissen, dass javascript: void (0); sollte besser sein, dass "falsch zurückgeben". Aber ich habe etwas Globaleres gesucht. Kann ich den href entfernen, wie du es im Kommentar gesagt hast? ist es gültiges XHTML? –

Ja, Sie können das href-Attribut entfernen und es ist ein gültiger HTML-Code. Ihr Link hört jedoch auf, ein Link zu sein, und Sie verlieren dadurch einige Funktionen. Ich habe meine Antwort mit Details aktualisiert. – coderjoe

Browser native klick vor dom: loaded

Antwort

Verwandte Themen