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

图：

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. Failure [INSTALL_CANCELED_BY_USER]

    安装app到真机,遇到 Failure [INSTALL_CANCELED_BY_USER] 错误. 解决方法:将手机的USB安装权限打开即可.设置->更多设置->开发者选项->US ...

  2. SSL、TLS中间人攻击

    生成私钥 生成一个ca.key私钥签名 然后用私钥生成一个伪造证书服务器的根证书 生成一个伪造证书服务器的根证书ca.crt 在攻击主机启动路由转发功能 或者echo 1 > /proc/sys ...

  3. 字符串相似度算法(编辑距离Levenshtein Distance)的应用场景

    应用场景 DNA分析: 将DNA的一级序列如β-球蛋白基因的第一个外显子(Exon)转化为分子“结构图”,然后由所得“结构图”提取图的不变量,如分子连接性指数．以图的不变量作为自变量,再由相似度计算公 ...

  4. web.xml中<security-constraint>和四种认证类型

    https://blog.csdn.net/lisheng19870305/article/details/40819481 sztc开发中http请求一直发送后无响应,通过soapui定位异常信息为 ...

  5. OpenSessionInViewFilter 的配置及作用(原文地址: http://blog.csdn.net/sunsea08/article/details/4545186)

    spring为我们解决hibernate的Session的关闭与开启问题. Hibernate 允许对关联对象.属性进行延迟加载,但是必须保证延迟加载的操作限于同一个 Hibernate Sessio ...

  6. 约束布局 ConstraintLayout

    app:layout_constraintVertical_bias="0.5"app:layout_constraintHorizontal_bias="0.5&quo ...

  7. PHP20-challenge10

      今天咩,说一个关于php的题目,里面主要主要牵扯到截断的知识点,这让我多了解了一些机制. 1.截断   截断,简单来说就是16进制的00,代表空.其实,那些输出语句函数就是凭借语句后面这个我们看不 ...

  8. ViewResolver和JSTL

    ---------------------siwuxie095                                 ViewResolver 和 JSTL         1.Spring ...

  9. HDU 1166 敌兵布阵(线段树单点更新，区间查询)

    描述 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况 ...

  10. linux命令学习之：touch

    touch命令有两个功能:一是用于把已存在文件的时间标签更新为系统当前的时间(默认方式),它们的数据将原封不动地保留下来:二是用来创建新的空文件. 语法 touch(选项)(参数) 选项 -a:或-- ...