Machen Sie PreventDefault() rückgängig oder machen Sie es besser, Linksammlungen programmgesteuert zu deaktivieren

Question

Ich habe eine Seite mit Ereignis-Listenern für den Netzwerkstatus.Wenn das Netzwerk offline ist, möchte ich alle domänenübergreifenden Links deaktivieren, um in den Offline-Modus zu wechseln.Ich habe versucht, es zu verwenden .preventDefault(), Wenn die App jedoch wieder online ist, muss ich die Links erneut aktivieren.

Ereignis-Listener

//check network status
if(!navigator.onLine) { 
    offlineLinks(); //Offline mode function
}
//add event listeners for network status
window.addEventListener('offline', function(e) {
    offlineLinks(); //Offline mode function
}, false);
window.addEventListener('online', function(e) {
    //need to re-enable links/Online mode
}, false);
window.addEventListener('error', function(e) {
    alert('Error fetching manifest: there is a good chance we are offline.');
    offlineLinks(); //Offline mode function
});

Funktion zum „Entlinken“

function offlineLinks() {
    $('a[href^="http"]').click(function(e) {
        e.preventDefault();
        $('#offline-dialog').dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
}

Ich suche nach einer skalierbaren Lösung, die keine Verzögerungen verursacht, wenn eine große Anzahl von Links auf der Seite vorhanden ist.Gibt es eine einfache Lösung, um das umzukehren? .preventDefault() Anruf oder einen besseren Weg, diese Aufgabe zu erfüllen?

Mögliche Lösungen

---

Meine ersten Gedanken waren, entweder ein Array der href-Werte zu speichern und dann zu entfernen/hinzuzufügen.Ich habe mit dem HTML5-Speicher herumgespielt webdbIch könnte eine Datenbank erstellen und die hrefs per Klick dynamisch abrufen ... Ich bin mir jedoch nicht sicher, ob dies die beste Lösung dafür ist.

Answer 1

Sie scheinen jQuery zu verwenden, zumindest für den Link-Handler-Teil.

Man muss sich darüber im Klaren sein, dass $.click(handler) nur eine Abkürzung für .bind('click', handler) ist.Wenn Sie den Handler an anderer Stelle definieren, können Sie ihn später auch wie folgt entbinden:

var handler = function(event) { 
  event.preventDefault();
  console.log("the links, they do nothing!");
}

// when you want the external links to be inactive.
// you could use .click(handler) here too, it's the same.
$('a[href^="http"]').bind('click', handler);

// when you want them back
$('a[href^="http"]').unbind('click', handler);

Übrigens ist href^="http" etwas fragil, wenn Sie möchten, dass dies nur bei externen Links passiert.Interne Links beginnen möglicherweise mit „http“ und einige externe Links könnten mit anderen Protokollen wie „ftp“ beginnen.Besser ist es, solchen Links eine eigene Klasse zu geben, wie es Wikipedia mit „extern“ tut.