找回密码
 注册

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

php 发表于 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标签后恢复点击:
为了防止乱码,请下载附件测试使用,不要直接复制以下代码。
  1. <!--
  2.         www.51-n.com
  3.         @author 吴先成 ohcc@163.com
  4. -->
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  9.         <title>只能单击一次的链接</title>
  10.         <style type="text/css">
  11.                 body{font:normal small-caps lighter 100%/1.5 \u6977\u4F53,georgia,arial,sans-serif;}
  12.                 a{display:inline-block;*zoom:1;height:2em;line-height:2em;padding:1em;border:1px solid #ffa500;border-radius:5px;text-decoration:none;}
  13.         </style>
  14.         <base target="_blank" />
  15.         <script type="text/javascript">
  16.                 window.onload=function(){
  17.                         var links=document.getElementsByTagName('a');
  18.                         for(var i=0;i<links.length;i++){
  19.                                 links[i].setAttribute('forbidden','no');
  20.                                 links[i].onclick=function(e){
  21.                                         if(this.getAttribute('forbidden')=="yes"){
  22.                                                 e=e||window.event;
  23.                                                 try{
  24.                                                         e.preventDefault();
  25.                                                 }catch(x){
  26.                                                         e.returnValue=false;
  27.                                                 }
  28.                                         }else{
  29.                                                 var links=document.getElementsByTagName('a');
  30.                                                 for(var i=0;i<links.length;i++){
  31.                                                         links[i].setAttribute('forbidden',this==links[i]?'yes':'no');
  32.                                                 }
  33.                                         }
  34.                                 };
  35.                         }
  36.                 }
  37.         </script>
  38. </head>
  39. <body>
  40.         <div id="p">
  41.                 <a href="http://www.51-n.com/">轻松E站</a>
  42.                 <a href="http://www.wuxiancheng.cn/">先成网</a>
  43.                 <a href="http://weibo.com/ohtc">吴先成的微博</a>               
  44.                 <a href="http://www.chinshare.com/">绵阳辰迅商贸有限公司</a>
  45.         </div>
  46. </body>
  47. </html>
复制代码
实现的方法有很多种,以上代码只是其中一种。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表