undo preventDefault()或以编程方式禁用链接集合的更好方法

我有一个页面,其中包含网络状态的事件侦听器。 当网络“离线”时,我想禁用任何跨域链接以进入离线模式。 我试图使用.preventDefault() ,但是当应用程序重新联机时,我需要重新启用链接。

事件听众

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

“去链接”function

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

我正在寻找一种可扩展的解决方案,如果页面上有大量链接,则不会导致延迟。 是否有一个简单的解决方案来反转.preventDefault()调用或更好的方法来完成此任务?

可能的解决方案


我最初的想法是要么存储一个href值数组,然后删除/添加。 我一直在使用webdb HTML5存储我可以创建一个数据库并动态地拉动hrefs onclick …但是我不确定这是否是最好的解决方案。

你似乎在使用jQuery,至少对于链接处理程序部分。

需要注意的是$ .click(handler)只是.bind(’click’,handler)的简写。 如果您在其他地方定义处理程序,您也可以稍后解除绑定,如下所示:

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

顺便说一句,如果您只希望这发生在外部链接上,则href ^ =“http”有点脆弱。 内部链接可以以“http”开头,一些外部链接可以从其他协议开始,如“ftp”。 最好给这些链接提供他们自己的类,就像维基百科用“外部”做的那样。