jquery - 在 Chrome/WebKit/Safari 中禁用锚点

Question

考虑以下代码：

$("a").attr("disabled", "disabled");

在 IE 和 FF 中，这将使锚点无法点击，但在基于 WebKit 的浏览器（Google Chrome 和 Safari）中，这无济于事。disabled 属性的好处是它很容易被删除并且不会影响 href 和 onclick 属性。

您对如何获得所需结果有任何建议。答案必须是：

• 很容易恢复，因为我想在运行 AJAX 调用时禁用表单输入控件。
• 必须在 IE、FF 和 WebKit 中工作

Answer 1

我假设您有一个绑定到这些锚元素的 onclick 事件处理程序。只需让您的事件处理程序检查“已禁用”属性并在已设置的情况下取消该事件。您的事件处理程序看起来像这样：

$("a").click(function(event){
  if (this.disabled) {
    event.preventDefault();
  } else {
    // make your AJAX call or whatever else you want
  }
});

您还可以设置样式表规则来更改光标。

a[disabled=disabled] { cursor: wait; }

编辑 - 按照评论中的建议简化了“禁用”检查。

Answer 2

我必须在一个站点中修复此行为，该站点有很多锚点，这些锚点根据其他条件等使用此属性启用/禁用。也许不理想，但在这种情况下，如果您不想修复每个锚点的代码单独来说，这将对所有锚点起作用：

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

和：

a[disabled] {
    color: gray;
    text-decoration: none;
}