annulla preventDefault() o un modo migliore per disabilitare a livello di codice raccolte di collegamenti

Question

Ho una pagina che ha ascoltatori di eventi per lo stato della rete.Quando la rete è "offline", desidero disabilitare tutti i collegamenti interdominio per passare in modalità offline.Stavo cercando di usare .preventDefault(), tuttavia quando l'app torna online devo riattivare i collegamenti.

Ascoltatori di eventi

//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
});

Funzione per "disconnettere"

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

Sto cercando una soluzione scalabile che non causi ritardi se è presente un numero significativo di collegamenti nella pagina.Esiste una soluzione semplice per invertire il .preventDefault() chiamata o un modo migliore per eseguire questa attività?

Possibili soluzioni

---

I miei pensieri iniziali erano di memorizzare un array di valori href e quindi rimuovere/aggiungere.Ho giocato con lo spazio di archiviazione HTML5 utilizzando webdbPotrei creare un database ed estrarre dinamicamente gli href onclick...tuttavia non sono sicuro che questa sia la soluzione migliore per questo.

Answer 1

Sembra che tu stia utilizzando jQuery, almeno per la parte del gestore del collegamento.

La cosa da capire è che $.click(handler) è solo una scorciatoia per .bind('click', handler).Se definisci il gestore altrove, puoi anche separarlo in un secondo momento, in questo modo:

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

A proposito, href^="http" è un po' fragile, se vuoi che ciò accada solo ai link esterni.I collegamenti interni potrebbero iniziare con "http" e alcuni collegamenti esterni potrebbero iniziare con altri protocolli come "ftp".È meglio attribuire a tali collegamenti una classe propria, come fa Wikipedia con "esterno".