javascript 撤消 preventDefault() 或以编程方式禁用链接集合的更好方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6339190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
undo preventDefault() or better way to programmatically disable collections of links
提问by jon3laze
I have a page that has event listeners for the network status. When the network is 'offline' I want to disable any cross domain links as to go into an offline mode. I was trying to use .preventDefault(), however when the app comes back online I need to re-enable the links.
我有一个页面，其中包含网络状态的事件侦听器。当网络处于“离线”状态时，我想禁用任何跨域链接以进入离线模式。我试图使用.preventDefault()，但是当应用程序重新上线时，我需要重新启用链接。
Event Listeners
事件监听器
//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 for 'de-linking'
“去链接”功能
function offlineLinks() {
$('a[href^="http"]').click(function(e) {
e.preventDefault();
$('#offline-dialog').dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
}
I am looking for a scalable solution that won't cause lag if there are significant numbers of links on the page. Is there a simple solution to reverse the .preventDefault()call or a better way to accomplish this task?
我正在寻找一种可扩展的解决方案，如果页面上有大量链接，则不会导致延迟。是否有一个简单的解决方案来反转.preventDefault()呼叫或完成此任务的更好方法？
Possible Solutions
可能的解决方案
My initial thoughts were either having store an array of the href values and then remove/add. I have been playing around with the HTML5 storage using webdb's I could create a database for and dynamically pull the hrefs onclick...however I'm not sure if this is the best solution for this.
我最初的想法是要么存储一组 href 值，然后删除/添加。我一直在玩 HTML5 存储使用webdb's I can create a database for and dynamic pull the hrefs onclick ...但是我不确定这是否是最好的解决方案。
回答by NeilK
You seem to be using jQuery, at least for the link handler part.
您似乎在使用 jQuery，至少在链接处理程序部分是这样。
The thing to realize is that $.click(handler) is just shorthand for .bind('click', handler). If you define the handler elsewhere, you can also unbind it later, like this:
要意识到的事情是 $.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);
By the way, href^="http" is a bit fragile, if you only want this to happen to external links. Internal links might start with "http", and some external links could start with other protocols like "ftp". Better to give such links their own class, like Wikipedia does with 'external'.
顺便说一句，href^="http" 有点脆弱，如果您只希望外部链接发生这种情况。内部链接可能以“http”开头，而一些外部链接可能以“ftp”等其他协议开头。最好给这样的链接自己的类，就像维基百科对“外部”所做的那样。
