如何禁用 JavaScript 中的 href 链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5376444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I disable a href link in JavaScript?
提问by Warrior
I have a tag <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>and in some conditions I want this tag to be completely disabled.
我有一个标签<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>';
回答by Pranay Rana
Try this when you dont want user to redirect on click
当您不希望用户在点击时重定向时试试这个
<a href="javascript: void(0)">I am a useless link</a>
回答by Pizzaiola Gorgonzola
you can deactivate all links in a page with this style class:
您可以使用此样式类停用页面中的所有链接：
a {
pointer-events:none;
}
now of course the trick is deactivate the links only when you need to, this is how to do it:
现在当然诀窍是仅在您需要时停用链接，这是如何做到的：
use an empty A class, like this:
使用一个空的 A 类，如下所示：
a {}
then when you want to deactivate the links, do this:
然后，当您要停用链接时，请执行以下操作：
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
}
NOTE: CSS rule names are transformed to lower case in some browsers, and this code is case sensitive, so better use lower case class names for this
注意：CSS 规则名称在某些浏览器中被转换为小写，并且此代码区分大小写，因此最好为此使用小写类名称
to reactivate links:
重新激活链接：
GetStyleClass('a').pointerEvents = ""
check this page http://caniuse.com/pointer-eventsfor information about browser compatibility
检查此页面http://caniuse.com/pointer-events有关浏览器兼容性的信息
i think this is the best way to do it, but sadly IE, like always, will not allow it :) i'm posting this anyway, because i think this contains information that can be useful, and because some projects use a know browser, like when you are using web views on mobile devices.
我认为这是最好的方法，但遗憾的是 IE 和往常一样，不会允许它 :) 无论如何我都会发布这个，因为我认为这包含可能有用的信息，并且因为一些项目使用了一个已知的浏览器，就像您在移动设备上使用 Web 视图一样。
if you just want to deactivate ONE link (i only realize THAT was the question), i would use a function that manualy sets the url of the current page, or not, based on that condition. (like the solution you accepted)
如果您只想停用一个链接（我只意识到这是问题所在），我会使用一个函数，根据该条件手动设置或不设置当前页面的 url。（就像你接受的解决方案）
this question was a LOT easier than i thought :)
这个问题比我想象的要容易得多:)
回答by tcooc
You can simply give it an empty hash:
你可以简单地给它一个空哈希：
anchor.href = "#";
or if that's not good enough of a "disable", use an event handler:
或者如果这还不够“禁用”，请使用事件处理程序：
anchor.href = "javascript:void(0)";
回答by ValentinVoilean
Try this using jQuery:
使用 jQuery 试试这个：
$(function () {
$('a.something').on("click", function (e) {
e.preventDefault();
});
});
回答by user3806549
(function ($) {
$( window ).load(function() {
$('.navbar a').unbind('click');
$('.navbar a').click(function () {
//DO SOMETHING
return false;
});
});
})(jQuery);
I find this way easier to implement. And it has the advantage that you js. Is not inside your html but in a different file. I think that without the unbind. Both events are still active. Not sure. But in a way you only need this one event
我发现这种方式更容易实现。它的优势在于你 js。不在您的 html 中，而是在不同的文件中。我认为没有解除绑定。这两个事件仍然活跃。没有把握。但在某种程度上你只需要这个一个事件
回答by dn3s
anchor.href = null;
回答by Chris Southwick
MDN recommends element.removeAttribute(attrName);over setting the attribute to null (or some other value) when you want to disable it. In this case it would be element.removeAttribute("href");
element.removeAttribute(attrName);当您想禁用它时，MDN 建议将属性设置为 null（或其他值）。在这种情况下，它将是element.removeAttribute("href");
https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
回答by JakeRobb
I had a similar need, but my motivation was to prevent the link from being double-clicked. I accomplished it using jQuery:
我有类似的需求，但我的动机是防止链接被双击。我使用 jQuery 完成了它：
$(document).ready(function() {
$("#myLink").on('click', doSubmit);
});
var doSubmit = function() {
$("#myLink").off('click');
// do things here
};
The HTML looks like this:
HTML 如下所示：
<a href='javascript: void(0);' id="myLink">click here</a>
回答by mVChr
The easiest way to disable a link is simply not to show it. Run this function whenever you want to test if your condition is met to hide the Previous button (replace if (true)with your condition):
禁用链接的最简单方法就是不显示它。每当您想测试是否满足您的条件以隐藏上一个按钮时运行此函数（替换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";
}
}
}
};
Then run testHideNav()whenever you need to make the check if your condition has changed.
然后testHideNav()在您需要检查您的条件是否发生变化时运行。
回答by Mikko
This is possible, too:
这也是可能的：
<a href="javascript:void(0)" onclick="myfunction()">
Link doesn't go anywhere by your function will be executed.
链接不会去任何地方，您的函数将被执行。
