如何在 JavaScript 中禁用 href 链接？

我有一个标签 <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>，在某些情况下，我希望这个标签被完全禁用。

Code from comments (this is how the link is generated)

if (n_index != n_pages)
a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>';
else
a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>';
a = a+'</ul></div>';
422403 次浏览
小开

使用 span 和 javascript onclick 代替。如果你有一个链接和“ #”href，一些浏览器会“跳转”。

小开
最佳答案

如果您不希望用户在单击时重定向，请尝试此操作

<a href="javascript: void(0)">I am a useless link</a>
小开

你可以简单地给它一个空散列:

anchor.href = "#";

或者，如果“禁用”还不够好，使用事件处理程序:

anchor.href = "javascript:void(0)";
小开

为 jquery 安装这个插件并使用它

Http://plugins.jquery.com/project/jqueryenabledisable

它允许您禁用/启用页面中的几乎所有字段。

如果您想在某种情况下打开一个页面，那么编写一个 java 脚本函数并从 href 调用它。如果条件满足，则打开页面，否则什么也不做。

代码如下:

<a href="javascript: openPage()" >Click here</a>


and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

还可以将链接放在 div 中，并将 Style 属性的 display 属性设置为 none。这样可以隐藏 div。 For eg.,

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

这样可以隐藏链接。通过在 onclick 中调用这个函数，使用一个按钮或图像使这个 div 可见:

<a href="Visible Link" onclick="showDiv()">


and write the js code as:


function showDiv(){
document.getElememtById("divid").style.display="block";
}

您还可以将 id 标记放到 html 标记中，这样就可以

<a id="myATag" href="whatever"></a>

And get this id on your javascript by using

document.getElementById("myATag").value="#";

其中一个肯定管用，哈哈

小开

禁用链接的最简单方法就是不显示它。当你想测试你的条件是否满足以隐藏上一个按钮时，运行这个函数(用你的条件替换 if (true)) :

var testHideNav = function() {
var aTags = document.getElementsByTagName('a'),
atl = aTags.length,
i;


for (i = 0; i < atl; i++) {
if (aTags[i].innerText == "Previous") {
if (true) { // your condition to disable previous
aTags[i].style.visibility = "hidden";
} else {
aTags[i].style.visibility = "visible";
}
} else if (aTags[i].innerText == "Next") {
if (false) { // your condition to disable next
aTags[i].style.visibility = "hidden";
} else {
aTags[i].style.visibility = "visible";
}
}
}
};

然后，当您需要检查您的条件是否已经更改时，运行 testHideNav()。

小开

这也是可能的:

<a href="javascript:void(0)" onclick="myfunction()">

Link doesn't go anywhere by your function will be executed.

小开

因此，上述解决方案使得链接无法工作，但是不要让链接不再有效(AFAICT)。我有一个情况，我有一系列的网页，并希望禁用(并使其明显禁用)的链接，指向当前的网页。

所以:

window.onload = function() {
var topics = document.getElementsByClassName("topics");
for (var i = topics.length-1; i > -1; i-- ) {
for (var j = topics[i].childNodes.length-1; j > -1; j--) {
if (topics[i].childNodes[j].nodeType == 1) {
if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
}
}
}
}
}

这将遍历链接列表，找到指向当前页面的链接(n _ root3可能是本地链接，但我想 document肯定有类似的链接) ，并将链接替换为链接文本内容。

高温

小开 
anchor.href = null;

小开

您可以使用这个样式类停用页面中的所有链接:

a {
pointer-events:none;
}

当然，现在的技巧是只有在你需要的时候才停用链接，这就是如何做到这一点:

使用一个空的 A 类，像这样:

a {}

然后，当你想停用链接，这样做:

    GetStyleClass('a').pointerEvents = "none"


function GetStyleClass(className)
{
for (var i=0; i< document.styleSheets.length; i++) {
var styleSheet = document.styleSheets[i]


var rules = styleSheet.cssRules || styleSheet.rules


for (var j=0; j<rules.length; j++) {
var rule = rules[j]


if (rule.selectorText === className) {
return(rule.style)
}
}
}


return 0
}

注意: 在一些浏览器中，CSS 规则名称被转换为小写，并且这段代码是区分大小写的，因此最好使用小写类名称

重新激活链接:

GetStyleClass('a').pointerEvents = ""

有关浏览器兼容性的信息，请查看此页 http://caniuse.com/pointer-events

我认为这是最好的方法，但遗憾的是 IE，像往常一样，不会允许:) 无论如何，我要发布这篇文章，因为我认为它包含了有用的信息，而且因为一些项目使用一个已知的浏览器，比如当你在移动设备上使用网页浏览时。

如果你只是想停用一个链接(我只知道这是个问题) ，我会使用一个功能，手动设置当前网页的网址，或不，基于该条件。 (喜欢你接受的解决方案)

this question was a LOT easier than i thought :)

小开

另一种禁用链接的方法

element.removeAttribute('href');

没有 href 的锚标记将作为禁用/纯文本反应

<a> w/o href </a>

instead of <a href="#"> with href </a>

见 jsFiddel

希望这能帮上忙。

小开

尝试使用 jQuery:

$(function () {
$('a.something').on("click", function (e) {
e.preventDefault();
});
});
小开

我也有类似的需求，但我的动机是防止链接被双击。我用 jQuery 完成了它:

$(document).ready(function() {
$("#myLink").on('click', doSubmit);
});


var doSubmit = function() {
$("#myLink").off('click');
// do things here
};

HTML 看起来像这样:

<a href='javascript: void(0);' id="myLink">click here</a>
小开

你也可以使用:

<a href="javascript:;">this link is disabled</a>
小开 
(function ($) {
$( window ).load(function() {
$('.navbar a').unbind('click');
$('.navbar a').click(function () {
//DO SOMETHING
return false;
});
});
})(jQuery);

我发现这种方法更容易实现。而且它的优势在于。不在 html 中，而是在另一个文件中。我觉得如果没有解开束缚。两个事件都还在进行中。不确定。但在某种程度上，你只需要这一个事件

小开

当您想要禁用该属性时，MDN 建议 element.removeAttribute(attrName);将该属性设置为 null (或其他值)。在这种情况下，它应该是 element.removeAttribute("href");

Https://developer.mozilla.org/en-us/docs/web/api/element/removeattribute

小开

你最好记住这一点 如果你有一个链接和“ #”href，一些浏览器会“跳转”，所以最好的方法是使用一个 < strong > 自定义 JavaScript

1) 如果你在 custom JavaScript之后，这里是:

<a href="#" onclick="DoSomething(); return false;">Link</a>

“ return false”阻止实际跟踪链接。

2) You may consider 避免使用 following

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

或者

  <a href="javascript:;" onclick="DoSomething();">Link</a>

因为 javascript 伪协议可以使页面在某些浏览器中处于等待状态，这可能会产生意想不到的后果。IE6因此而闻名。但是如果你不关心 IE6，并且你正在测试所有的东西——这可能是一个很好的解决方案。

3) If you already have jQuery and bootstrap in your project, you can look into using them like so:

$('.one-click').on("click", function (e) {
$( this ).addClass('disabled');
});

其中 .disabled类来自引导程序。

Qupte form 引导站点(给你)

链接功能注意事项

那个。被禁用的类使用 pointer-events: none来尝试禁用 s 的链接功能，但是 CSS 属性还没有标准化。此外，即使在支持指针事件的浏览器中: 没有，键盘导航仍然不受影响，这意味着正常的键盘用户和辅助技术的用户仍然能够激活这些链接。因此，为了安全起见，在这些链接上添加一个 tabindex="-1"属性(以防止它们接收键盘焦点) ，并使用 custom JavaScript禁用它们的功能。

custom JavaScript在 1节中显示

小开

基于许多答案和我在这里的经验，我的最佳解决方案是:

<a href="javascript:">I am a useless link</a>

一些 options和他们的 注意事项:

<a href="#">I will make you page jump to top</a>


<a href="#" onclick="DoSomething(); return false;">I'll break others scripts events</a>


<a href="javascript: openPage()" >Please... I should be an onclick event...</a>


<a href="javascript:" onclick="openPage()" >Please...do I even need to be an anchor?</a>


<script>element.removeAttribute("href") // some browsers will remove link style</script>


<script>element.href = null // some browsers will remove link style</script>


<style>
a.my-off-class {
pointer-events: none
}
/** I disable hover event too. And... Is this a style responsability?
</style>
小开

使用以下三种方法: Event.preventDefault();、 Event.stopPropagation();和 return false;。

Event 接口的 proventDefault ()方法告诉用户代理，如果事件没有得到显式处理，那么它的默认操作就不应该按照正常的方式执行。(来源: MDN 网络文档)

Event 接口的 stop )防止当前事件在捕获和冒泡阶段的进一步传播。(来源: MDN 网络文档)

  • return false; : 向 onevent处理程序表明我们正在取消链接单击行为。

来自处理程序的返回值确定事件是否被取消。(来源: MDN 网络文档)

全工作 JSBin 演示。

堆栈溢出演示..。

document.getElementById('my-link').addEventListener('click', function(e) {
console.log('Click happened for: ' + e.target.id);
e.preventDefault();
e.stopPropagation();
return false;
});
<a href="https://www.wikipedia.com/" id="my-link" target="_blank">Link</a>

小开

最简单的方法就是 element.style.pointerEvents = “ none”;

有人在上面提到了一些类似的东西，但是不需要任何自定义的 CSS ——只需要在你的 JS 中直接设置样式属性，然后当/如果你想稍后重新启用它的时候返回到“”。

小开 
 <a href="https://" onclick="MyFunction();return false;">

提交答案