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

Question

我有一个页面,其中包含网络状态的事件侦听器.当网络"离线"时,我想禁用任何跨域链接以进入离线模式.我试图使用.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 offlineLinks() {
    $('a[href^="http"]').click(function(e) {
        e.preventDefault();
        $('#offline-dialog').dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
}

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

可能的解决方案

---

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

Answer 1

你似乎使用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"等其他协议开头.最好给这些链接提供他们自己的类,就像维基百科用"外部"做的那样.