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

来源：互联网发布：类似trackid的软件编辑：程序博客网时间：2024/05/19 19:32

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