阻止a链接href跳转的两种方式

阻止a链接href跳转的两种方式
用户在使用网站过程中,有时点击a链接后无感,造成多次频繁点击的问题,为了防止这类事件的发生,降低服务器的压力,考虑是否可以全站防止a链接多次被点击触发,想到两种方式,一种是组织鼠标的默认事件,另一种是阻止click的默认事件,通常情况下是第一次点击需要能触发,在一定的时间内不允许再次触发。

1.通过修改鼠标的事件来阻止访问 第一次点击给a加上 pointer-events: none;增加定时器,2s后将pointer-events的值修改为auto, 示例代码如下


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>修改鼠标的事件</title> 

 </head> 
 <body> 
<a href="http://www.csdn.net/">CSDN</a>  
<a href="http://www.google.com">google</a>  
 <script type="text/javascript">  

   var allLinks = document.querySelectorAll('a')

     Array.prototype.forEach.call(allLinks, function (link) {
        link.addEventListener('click', function (e) {
            this.setAttribute("style","pointer-events:none");
            var that = this;
            setTimeout(function(e,b){
                that.setAttribute("style","pointer-events:auto");
            },2000);
        })
    })
 </script> 
 </body> 
 </html>

2.通过给a链接添加属性标示是否可点击,来判断是否可以进行进行,第一次点击时,给属性data-flag赋值为true,定时之后将属性 data-flag移除,判断没有属性可以进行默认事件,存在该属性,并且值为true,则进行阻止事件,添加定时器,2s后清除该a标签的data-flag属性 示例代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>阻止click的默认事件</title> 

 </head> 
 <body> 
<a href="http://www.csdn.net/">CSDN</a>  
<a href="http://www.google.com">google</a>  
 <script type="text/javascript">  
    var allLinks = document.querySelectorAll('a')
     Array.prototype.forEach.call(allLinks, function (link) {
        link.addEventListener('click', function (e) {
            var dataFlag = this.getAttribute("data-flag");
            if (dataFlag != null && dataFlag == 'true'){
                e.preventDefault();
                console.log("stop")
            }
            else{
                console.log("start")
                var that = this;
                that.setAttribute("data-flag","true");
                setTimeout(function(){
                    that.removeAttribute("data-flag");
                },2000);
            }
        })
    })
 </script> 
 </body> 
 </html>

本文为自己理解所写,如有错误希望批评指正,不喜勿喷!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值