Html 如何在单击一次后禁用href

我希望在单击a href一次后禁用它

我有以下几点：

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable();">

我的代码都在xslt文件中。 这件事我哪里做错了

以下是我的更新代码，供大家参考：

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">

<script type="text/javascript">

function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
link.href="";
}

功能单击并禁用（链接）
{
警报（“输入clickAndDisable功能”）；
link.href=“”；
}

这会使链接根本无法工作，我希望链接在第一次单击时可以工作，但在其他任何时候都不能工作….

首先：

.href=“”

不会将

href

属性设置为空值，而是设置为字符串

'

。相反，

.href=”“

做您尝试过的事情

---

第二：

此

引用内联

onclick

处理程序中事件的源元素。但是，当在事件处理程序中调用函数时，没有对

this

进行特殊处理，因此在函数中对

this

的任何引用都将指向

窗口

对象

要解决此问题，您可以：

1） 将元素传递给函数：

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">

function check(link) {
if (link.className != "visited") {
   //alert("new");
   link.className = "visited";
   return true;    
}
//alert("old");
return false;

2） 使用

Function.prototype.call（）

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable.call(this);">

3） 使用Javascript附加事件处理程序并转储内联处理程序（在这种情况下，

this

将设置为调用处理程序函数时触发处理程序的

EventTarget

）：

---

第三：合并@SamAnderson的答案，而不是为

href

设置一个空值，您还可以在第一次调用时设置一个标志，并评估是否在以后的调用中设置了该标志，如果是，请使用

Event.preventDefault（）

来防止超链接表单的正常操作发生：

---

如果您可以使用jQuery，那么您可以在第一次单击时附加一个类，然后再添加一个默认值

$('a').on("click", function (e) {
    if($('a').hasClass('clicked'){
        e.preventDefault();
    } else {
        $('a').addClass('clicked');
    }
});

显示了一个示例

---

编辑：正如Johannes H.所指出的，jQuery不是必需的，这可以在纯JS中完成，如图所示

   function clickAndDisable(link) {
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">

功能单击并禁用（链接）{
link.onclick=函数（事件）{
event.preventDefault（）；
}
}   

我在使用以下javascript函数单击一次后禁用了href：

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">

function check(link) {
if (link.className != "visited") {
   //alert("new");
   link.className = "visited";
   return true;    
}
//alert("old");
return false;

---

}​​

您可以使用jQuery吗？警报是否会触发？如果您对

此

的值有任何疑问，您可以始终执行

控制台。记录（此）

是的，警报会触发，因此它会进入功能查看我的答案，了解它为什么不能正常工作，以及工作解决方案的任何答案。嗨，Johannes，我尝试了您的所有解决方案，但似乎都无法工作。关于解决方案3，我确实有一个问题，那就是应该在哪里声明click变量？这不一定需要JQuery。如果OP正确使用了事件处理程序，

Even.preventDefault（）

在没有任何jQUery的情况下工作-它是标准Javascript的一部分，不是jQUery扩展非常正确！我已经将fiddle更新为纯JS，我应该将单击的变量放在哪里？我已将其放置在以下位置，但警报“Entered click=true”只会触发：var clicked=false；函数clickAndDisable（e）{alert（“Entered clickAndDisable函数”）；if（单击）{e.preventDefault（）；alert（“Entered preventDefault”）；}否则{clicked=true；alert（“Entered clicked=true”）；}我的答案是一个简单的尝试，如果只有一个环节需要这种治疗，onyl可以起作用。单击的变量位于全局空间中。如果你想要一个每元素的建议，我推荐@SamAnderson的答案

<a href="BeginPayment.aspx?PayPal=true" id ="link">

var clicked = false;

function clickAndDisable(e)
{
    alert("Entered clickAndDisable function");
    if (clicked)
    {
        e.preventDefault();
    }
    else
    {
        clicked = true;
    }
}

document.getElementById('link').attachEventListener('click', clickAndDisable);

$('a').on("click", function (e) {
    if($('a').hasClass('clicked'){
        e.preventDefault();
    } else {
        $('a').addClass('clicked');
    }
});

   function clickAndDisable(link) {
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   

<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">

function check(link) {
if (link.className != "visited") {
   //alert("new");
   link.className = "visited";
   return true;    
}
//alert("old");
return false;