undo preventDefault()或以编程方式禁用链接集合的更好方法 [英] undo preventDefault() or better way to programmatically disable collections of links

问题描述

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

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.

事件监听器

//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()调用，或者是完成此任务的更好方法?

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?

可能的解决方案

我最初的想法是先存储一个href值数组，然后再删除/添加.我一直在使用webdb来处理HTML5存储，我可以为其创建数据库并动态提取hrefs onclick ...但是我不确定这是否是最佳解决方案.

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.

推荐答案

您似乎至少在链接处理程序部分使用jQuery.

You seem to be using jQuery, at least for the link handler part.

要实现的事情是$ .click(handler)只是.bind('click'，handler)的简写.如果您在其他地方定义处理程序，也可以稍后解除绑定，如下所示:

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:

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"之类的其他协议开头.最好让此类链接属于自己的类，例如Wikipedia的外部"类.

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'.

这篇关于undo preventDefault()或以编程方式禁用链接集合的更好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！