annulla preventDefault() o un modo migliore per disabilitare a livello di codice raccolte di collegamenti
-
27-10-2019 - |
Domanda
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 webdb
Potrei creare un database ed estrarre dinamicamente gli href onclick...tuttavia non sono sicuro che questa sia la soluzione migliore per questo.
Soluzione
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".