点击事件后禁用锚链接答案

【问题标题】：Disable anchor link after click event点击事件后禁用锚链接
【发布时间】：2015-03-06 21:20:15
【问题描述】：

我有一个锚链接并且需要行为，当用户单击它时我需要它然后禁用它直到页面再次加载，此时它再次重新启用（然后在用户单击时再次禁用等） ..

与表单上的提交帖子按钮的行为非常相似，在发布之前可以禁用它。

我还没有遇到一个例子，所以希望有人能提供帮助。

我已经在 click 事件上尝试了 e.PreventDefault ，但这会阻止链接被点击我不想要的句号。（我需要点击它然后禁用它）

示例代码..

$(function () {
  $('header.div.nav.ul').first().on("click", function (e) {

        // how do i disable the link?

  });
});

HTML 示例..（我正在尝试使用文本“Blah”来定位链接

<header class="module module-header">
  <div class="centered">
    <a href="/Open24Redesign/Accounts/Overview/Index" class="logo logo-small">
      <img src="" data-src="" data-src-retina="" alt="logo" style="opacity: 1;">
    </a>
    <nav>
      <ul class="unstyled clearfix">
        <li class="active"><a href="#">blah</a></li>
        <li><a href="">x</a></li>
        <li><a href="">y</a></li>
        <li><a href="">z</a></li>                 
      </ul>
    </nav>
  </div>
</header>

非常感谢

【问题讨论】：

您的目标是 UL，而 UL 不是链接，也不能禁用
Disabling a anchor with a click event的可能重复
抱歉不清楚 - 第一个 li 元素中有一个锚链接
@AdrianSean - 您仍然没有针对该锚点，因此添加 preventDefault 或 $(this).prop('disabled', true) 将不起作用，因为您针对的是 UL。
是正在执行的链接还是导致页面加载的函数？

标签： javascript jquery html

【解决方案1】：

此页面上的解决方案不允许设置多个链接。

这是一个适用于任何元素的 jQuery 实现。

此外，它适用于同一页面上的任意数量的链接，并且非常容易实现。

选择一个不太可能使用的类名。

只需将“can_click_once”类添加到您只想点击一次的任何 div、锚点、按钮等。

插入这个 Javascript

$(".can_click_once").click(function(e) {
    if($(this).hasClass( "qubux" )) {
        e.preventDefault();
    } else {
        $(this).addClass('qubux');
        //you can also run other stuff you need once
    }
});

【讨论】：

【解决方案2】：

我在 Chrome 中的实验表明 .one() 和 e.preventDefault(); 的组合不足以达到此目的。第一次单击链接时，它不使用href，而是遵循.one('click', function(e) { }); 中的代码。但是，如果您双击锚标记，它会使用 href。

要解决此问题，我会将锚标记更改为不带 href 和 .one() 方法的按钮，或者我会在 Muhammad Saleh 的回答中对建议的代码进行一些修改：

var clicked = false;
$('#aTagID').on('click', function(){
    event.preventDefault();
    if(clicked === false) {
       clicked = true;
       window.location = "..."; // or some other code.
    }
});

【讨论】：

【解决方案3】：

您应该使用one 而不是on。您还可以稍微简化您的选择器：

$('header nav a').one('click', function(e) {
  e.preventDefault();
  // do what you want the first time here
  // it will only get executed once
});

jquery 参考.one()

【讨论】：

【解决方案4】：

我们将创建一个标志来检查按钮是否被点击，如果它被点击，我们将禁用它，如果没有，它将被点击

 var clicked = false;
 $('header.div.nav.ul li').first().find('a').on("click", function (e) {
    if(clicked===false){
       clicked=true;
    }else{
       e.preventDefault();
    }
  });

【讨论】：

【解决方案5】：

由于您希望点击事件只执行一次，您应该使用.one() 而不是.on()

 $('header.div.nav.ul').first().one("click", function (e) {

        // do stuff
});

【讨论】：