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

最新推荐文章于 2024-06-29 14:37:38 发布

lc20008

最新推荐文章于 2024-06-29 14:37:38 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签： a链接href

本文链接：https://blog.csdn.net/lc20008/article/details/77989590

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

阻止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>