JS限制链接只能点击一次

大郎 · 发表于 2014-4-21 00:35

一个页面上有多个链接，某个链接被点击后不能再次点击，而其他链接可以，当点击另外一个链接的时候，又允许之前被禁止的链接点击。
可以用javascript来实现限制页面上的链接只能点击一次，再次点击失效。
大概的实现原理：
遍历页面上的所有a标签元素，设置一个自定义属性forbidden，默认值为no
给每一个a标签元素设置click事件处理函数，即当点击链接时执行的函数。
而这个函数的功能就是判断当前被点击的a标签元素的自定义属性forbidden的值是否为yes。
为yes则阻止默认事件的发生，也就是禁止链接跳转。附上默认事件，在标准浏览器中可以用preventDefault()，在早期的IE浏览器中可以用window.event.returnValue=false;
为no时则重新遍历所有a标签元素，将当前a标签元素的forbidden值设置为yes，其他的设置为no.
下面是实例代码实现a标签点击后禁止点击，点击其他a标签后恢复点击：
为了防止乱码，请下载附件测试使用，不要直接复制以下代码。

<!--
www.51-n.com
@author 吴先成 ohcc@163.com
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>只能单击一次的链接</title>
<style type="text/css">
body{font:normal small-caps lighter 100%/1.5 \u6977\u4F53,georgia,arial,sans-serif;}
a{display:inline-block;*zoom:1;height:2em;line-height:2em;padding:1em;border:1px solid #ffa500;border-radius:5px;text-decoration:none;}
</style>
<base target="_blank" />
<script type="text/javascript">
window.onload=function(){
var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].setAttribute('forbidden','no');
links[i].onclick=function(e){
if(this.getAttribute('forbidden')=="yes"){
e=e||window.event;
try{
e.preventDefault();
}catch(x){
e.returnValue=false;
}
}else{
var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].setAttribute('forbidden',this==links[i]?'yes':'no');
}
}
};
}
}
</script>
</head>
<body>
<div id="p">
<a href="http://www.51-n.com/">轻松E站</a>
<a href="http://www.wuxiancheng.cn/">先成网</a>
<a href="http://weibo.com/ohtc">吴先成的微博</a>
<a href="http://www.chinshare.com/">绵阳辰迅商贸有限公司</a>
</div>
</body>
</html>

复制代码

实现的方法有很多种，以上代码只是其中一种。

账号		自动登录	找回密码
密码			新建账号

[JS] JS限制链接只能点击一次

本帖子中包含更多资源

相关帖子