Javascript 1单击html后禁用href？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13580815/
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
disable href after 1 click on html?
提问by Karthik Raj
I want the hrefto be disabled after 1 click, can it be done using javascript or jquery?
我想href在 1 单击后禁用它，可以使用 javascript 或 jquery 来完成吗？
Please help.
请帮忙。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<head>
<style>
a:link{
color:#1DAAA1;
}
a:visited{
color:green;
}
a:hover{
background: #ff0000;
color: #FFF;
}
</style>
</head>
<body>
<table width="500" align="center" border="5px solid">
<tr align="center" >
<td><a href="http://www.google.com.my/" onclick="return false"> Google </a></td>
<td><a href="http://www.yahoo.com/"> Yahoo </a></td>
<td><a href="http://www.bing.com/"> Bing </a></td>
<td><a href="http://en.wikipedia.org/wiki/Main_Page"> Wikipedia </a></td>
<td><a href="https://www.facebook.com/"> Facebook </a></td>
</tr>
</table>
</body>
</html>
回答by vmihaylov76
Pure javascript solution:
纯javascript解决方案：
<script>
function clickAndDisable(link) {
// disable subsequent clicks
link.onclick = function(event) {
event.preventDefault();
}
}
</script>
<a href="target.html" onclick="clickAndDisable(this);">Click here</a>
回答by Dmitriy
This is simpler approach using jQuerythat prevents links double clicking: no onclickattributes, idisn't required, no hrefremoving.
这是使用jQuery防止链接双击的更简单方法：没有onclick属性，id不需要，没有href删除。
$("a").click(function (event) {
if ($(this).hasClass("disabled")) {
event.preventDefault();
}
$(this).addClass("disabled");
});
Tip:you can use any selector (like button, input[type='submit'], etc.) and it will work.
提示：你可以使用任何选择（如button，input[type='submit']等），它会工作。
回答by Ayyappan Sekar
just try this....
试试这个....
a:visited {
color:green;
pointer-events: none;
cursor: default;
}
回答by Ayyappan Sekar
this time i tried it with Javascript... hope it will help u:) just call the below function in "onclick()" of the required href tags...
这次我用 Javascript 试过了……希望它能帮助你:) 只需在所需的 href 标签的“onclick()”中调用以下函数……
?function check(link) {
if (link.className != "visited") {
//alert("new");
link.className = "visited";
return true;
}
//alert("old");
return false;
}??
like ?<a href="#" onclick="return check(this);">link here</a>?????????????????????????????????????????????????????????????????????????????????????????and see demo here
喜欢 ？<a href="#" onclick="return check(this);">link here</a>?????????????????????????????????????????????????????????????????????????????????????????并在此处查看演示
回答by Mr. Napik
Pure JavaScript solution to allow user to follow the URL only once:
纯 JavaScript 解决方案，允许用户只关注 URL 一次：
<a id="elementId"
href="www.example.com"
onclick="setTimeout(function(){document.getElementById('elementId').removeAttribute('href');}, 1);"
>Clik and forget</a>
Once clicked, this will remove the href attribute (with 1 ms wait to allow the original action to start) making the link silent. Similar as suggested by Dineshkani, but the original answer caused action to not to start at all on some browsers.
单击后，这将删除 href 属性（等待 1 毫秒以允许原始操作开始）使链接静音。与 Dineshkani 建议的类似，但原始答案导致操作在某些浏览器上根本无法启动。
回答by Omar N Shamali
duplicate the same div in html and css, the duplicated one must be below the original one using: z-index=-1 or/and position:absolute.
在 html 和 css 中复制相同的 div，复制的 div 必须低于原始的，使用：z-index=-1 或/和 position:absolute。
make the original div onclick="HideMe(this)"
使原始 div onclick="HideMe(this)"
JS:
<script type="text/javascript">
function HideMe(element){
element.style.display='none';
}
</script>
it might be not the best way, but 100% goal achievable.
这可能不是最好的方法，但 100% 的目标是可以实现的。
回答by Dineshkani
You can do with jquery
你可以用 jquery
<a href='http://somepage.com' id='get' onlick='$("#"+this.id).attr("href","")'>Something to be go </a>
Or with the javascript
或者使用 javascript
<a href='http://somepage.com' id='get' onlick='document.getElementById(this.id).removeAttribute("href");'>Something to be go </a>
回答by germankiwi
Based on Ayyappan Sekar's answer, I have just done something very similar using jQuery:
基于 Ayyappan Sekar 的回答，我刚刚使用 jQuery 做了一些非常相似的事情：
$('#yourId').click(function (e) {
if(!$(this).hasClass('visited'))
{
$(this).addClass('visited')
return true;
}
else
{
$(this).removeAttr("href"); // optional
// some other code here
return false;
}
});
回答by IT ppl
jQuery solution:
jQuery 解决方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function check(link) {
$(link).replaceWith($(link).text());
}
</script>
<style>
a:link{
color:#1DAAA1;
}
a:visited{
color:green;
}
a:hover{
background: #ff0000;
color: #FFF;
}
</style>
</head>
<body>
<table width="500" align="center" border="5px solid">
<tr align="center" >
<td><a href="http://www.google.com" target="_blank" onclick="return check(this);"> Google </a></td>
<td><a href="http://www.yahoo.com" target="_blank" onclick="return check(this);"> Yahoo </a></td>
<td><a href="http://www.bing.com" target="_blank" onclick="return check(this);"> Bing </a></td>
<td><a href="http://en.wikipedia.org" target="_blank" onclick="return check(this);"> Wikipedia </a></td>
</tr>
</table>
</body>
</html>
