在javascript中禁用href链接

Question

我想在javascript中禁用href链接，但仅在特定的持续时间内禁用。

<tr><td width= 40></td><td id="idHardwareInfo_5" class="sub_newmenu_item" ><a href="javascript:fnMenuClickedCustPop()"><% _("Discovery"); %></a></td></tr>

function fnMenuClickedCustPop()
{
        fnMenuClicked('XYZ.asp', 'id_5');
        alert("This operation may take a few minutes to complete.Please wait...");
}

这个XYZ.asp文件包括一个.inc文件，该文件包含js代码，其功能包括执行18次循环。我想禁用href链接，直到循环从1到18完全完成，这样在用户之间不能点击link.What可以是最好的方法吗？PS:我对javascript完全是个新手。谢谢:-)

Answer 1

在循环开始时，将以下css类添加到函数中的链接中，并在循环结束时删除它

.not-active {
   pointer-events: none;
   cursor: default;
}

<a id="link" href="javascript:fnMenuClickedCustPop()"><% _("Discovery"); %></a>

function fnMenuClickedCustPop()
{
        alert("This operation may...");
        $("#link").addClass('not-active') //when loop is going to start
        fnMenuClicked('XYZ.asp', 'id_5');
        $("#link").removeClass('not-active') //once loop finishes, you might need to do this inside XYZ.asp where loop runs not here. This is just an indicator

}

Answer 2

您可以向元素添加事件侦听器，以防止单击时的默认行为，然后在您想要重新启用href时删除该侦听器。假设您不使用jQuery或任何插件，比如vanilla JS

你有

<a id="disableForDuration" href="xxxx">link</a>

在JS中，您可以执行以下操作

var elem = document.getElementById("disableForDuartion");
var handler = function (evt) {
    evt.prevantDefault();
}
elem.addEventListener("click", handler);

// Do whatever stuff....

// when you want to enable the link
elem.removeEventListener("click", handler);