Question

我希望在用户点击按钮之前无法访问页面上的所有链接。

$('a').attr('href','#');

$("#button-yes").click(function(){
    $('a').attr('href',function(){
        $(this).attr('href');
    });
});

Answer 1

如何跟踪状态而不是重写所有href？

var buttonClicked = false;

$('a').click(function(){
  if(! buttonClicked) {
    return false;
  }
});

$("#button-yes").click(function(){
    buttonClicked = true;
});

Answer 2

在你的函数外面有一个var，其中包含：

button_clicked = false;

然后使用它来禁用所有链接

$('a').click(function(){
   if(!button_clicked){
      return false;
   }
});

返回false会导致链接无效。

Answer 3

您需要存储href的值，以便以后可以恢复。我将href值存入rel属性。

$('a').each(function(){
    $(this).attr('rel', $(this).attr('href'));  //store the href values
    $(this).attr('href', '');  //clear the href values
});

$("#button-yes").click(function(){
    $('a').each(function(){
        $(this).attr('href', $(this).attr('rel'));  //recover the href values
    });
});

这是一种简单的方法，但它将地址保留在rel属性中。一个聪明的用户可能会发现并使用它来绕过你的按钮，所以这是@rsp建议的另一种方法。

$('a').each(function(){
    $(this).data('link', $(this).attr('href'));  //store the href values
    $(this).attr('href', '');  //clear the href values
});

$("#button-yes").click(function(){
    $('a').each(function(){
        $(this).attr('href', $(this).data('link'));  //recover the href values
    });
});

通过使用.data（）存储href，链接地址更加模糊，因此用户不应该轻易绕过按钮（尽管禁用JavaScript会完全避开这一点）。

Answer 4

最简单的例子是劫持所有链接的点击事件：

$('a').live('click.disable', function() {
    return false;
});

$("#button-yes").click(function() {
    $('a').die('click.disable');
});

（请参阅此小提琴：http://jsfiddle.net/A6QPn/）但任何人都可以右键点击该链接，然后在新标签页或类似内容中将其打开。

另一个例子是将href属性存储为数据并在以后恢复它们：

$('a').each(function() {
    var $this = $(this);
    $this.data('href', $this.attr('href'));
    $this.attr('href', '#');
});

$("#button-yes").click(function() {
    $('a').each(function() {
        var $this = $(this);
        $this.attr('href', $this.data('href'));
    });
});

（请参阅此小提琴：http://jsfiddle.net/eQDdQ/）这里的链接无效，因为它们都指向当前页面上的“＃”。

另一个例子是基本上做同样的事情，但完全删除href属性使链接看起来像普通文本，直到单击按钮：

$('a').each(function() {
    var $this = $(this);
    $this.data('href', $this.attr('href'));
    $this.removeAttr('href');
});

$("#button-yes").click(function() {
    $('a').each(function() {
        var $this = $(this);
        $this.attr('href', $this.data('href'));
    });
});

（见这个小提琴：http://jsfiddle.net/gmLTP/）

jQuery更改属性并将其更改回来

4 个答案: