原始需求：防止按钮短时间内高频率触发点击事件，由于重复提交导致的业务异常。

图：

demo：

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <style media="screen">

      .forbidden button{

        cursor: not-allowed;

      }

    </style>

  </head>

  <body>

    <h5>3秒内的多次点击只生效一次（基于事件拦截）</h5>

    <div class="button-group">

      <button class="link-button" onclick="randomNum()">random</button>

      随机数：<span id="random_num"></span>

    </div>

  </body>

  <script type="text/javascript">

  /* 初始化禁用绑定 */

  document.querySelector('.link-button').addEventListener('click',forbiddenButton,true);

  function randomNum(){

    document.querySelector('#random_num').innerHTML = Math.random();

  }

  var forbiddenTimer;

  function forbiddenButton(){

    var pNode = this.parentNode;

    pNode.classList.add('forbidden');

    pNode.addEventListener('click',function(e){

      if(Array.from(this.classList).includes('forbidden')) e.stopPropagation();

      _clearTimer();

    },true);

    _clearTimer();

    function _clearTimer(){/* 3秒之后取消禁用状态 */

      if(forbiddenTimer) clearTimeout(forbiddenTimer);

      forbiddenTimer = setTimeout(function(){

        pNode.classList.remove('forbidden');

      },3000);

    }

  }

  </script>

</html>

addEventListener事件拦截参考：https://www.cnblogs.com/Andyudd/p/5583563.html

javascript 事件流的应用之 addEventListener的更多相关文章

  1. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  2. 【原】javascript事件流

    摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原 ...

  3. 深入理解javascript事件流

    摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原 ...

  4. 深入了解javascript事件流

    摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原 ...

  5. JavaScript事件流

    什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素:而Netscape公司的Netscape Navigator则是朝相反的方向传播, 也就是从目标元素开始 ...

  6. javaScript事件流是什么？

    一.事件 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间交 ...

  7. JavaScript事件流--事件冒泡、目标与事件捕获

    1.事件冒泡 微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因 ...

  8. 浅析JavaScript事件流——冒泡

    一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...

  9. javascript 事件流及应用

    当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序发生该元素的触发 事件,事件传播的顺序叫做事件流 1.事件流的分类: A.冒泡型事件(所有浏览器都支持)   由明确的事件源到最不确定 ...

随机推荐

  1. asp.net MVC 导出excle（转）

    转载网址: http://www.cnblogs.com/imr3/articles/2856109.html 还是放到自己这边比较保险. ExportExcel Code public FileRe ...

  2. PHP采集利器：Snoopy 试用心得

    Snoopy.class.php下载 Snoopy是一个php类,用来模拟浏览器的功能,可以获取网页内容,发送表单.Snoopy正确运行需要你的服务器的PHP版本在4以上,并且支持PCRE(Perl ...

  3. Linux sudo用法与配置

    Linux环境:CentOS 6.7 结构说明 可以通过编辑文件/etc/sudoers来配置,通常使用visudo命令来进行修改,因为如果你修改的格式不符合它会进行提示.接下来就通过一个格式来了解它 ...

  4. Python+Selenium学习--操作测试对象

    场景 前面已经讲解了如果定位对象,定位之后需要对这个对象进行操作.是鼠标点击还是键盘输入,取决于我们定位的对象缩支持的操作. webdriver中比较常用的操作元素的方法有下面几个: clear    ...

  5. 浅谈CSRF

    CSRF是什么? (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一,也被称为“One Click ...

  6. 再遇ibatisNet

    11年在Mr刘的带领下第一次接触ibatisnet ,当时Mr刘很详细的很讲了xml里的写法还有配置文件之类的,但是随着时间越来越久远.很多东西都开始淡忘了. 如今,再次和它相遇,依然觉得很亲切,虽然 ...

  7. StringBuffer 和 StringBuilder 类

    当对字符串进行修改的时候,需要使用 StringBuffer 和 StringBuilder 类. 和 String 类不同的是,StringBuffer 和 StringBuilder 类的对象能够 ...

  8. eclipse下创建maven项目并部署到tomcat服务器(转)

    maven项目部署到服务器有很多方法,可以利用jetty-maven-plugin或者tomcat-maven-plugin,这属于maven的知识点. 通常开发中,需要将项目放在服务器上借助开发工具 ...

  9. js中用变量作为$()内id的值、动态获取id，及获取其下面的class元素

    在开发中写了一个公共方法对模板tpl进行渲染,然而他的id是通过变量传值过来的,在网上查阅后找到解决方法,写法如下: $("#"+tplVal).html(html); 用$(&q ...

  10. sqlserver打开对象资源管理器管理的帮助文档的快捷键

    sqlserver打开对象资源管理器管理的帮助文档的快捷键:Fn+F1