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

图：

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. ORA-30926: 无法在源表中获得一组稳定的行ORA-06512: 在 "STG.FP_MO_SPLIT", line 1562 临时

  2. metasploit framework（十）：SSH扫描、爆破

    SSH版本扫描 SSH密码爆破 设置爆破字典 run开始

  3. db2 性能查看top sql

    DB2 V10.3    查看top sql ,类似oracle 这篇文章是对之前有篇db2 v9的简化更新,总体还是觉得DB2TOP比较好用直观,不过需要导出SQL时,或自动化脚本时,还是建议执行S ...

  4. JMeter学习（八）JDBC测试计划－连接Oracle（转载）

    转载自 http://www.cnblogs.com/yangxia-test 一.测试环境准备   Oracle:10g  JDBC驱动:classes12.jar oracle安装目录下(orac ...

  5. 【C++】Mandelbrot集绘制(生成ppm文件)

    曼德勃罗特集是人类有史以来做出的最奇异,最瑰丽的几何图形.曾被称为"上帝的指纹". 这个点集均出自公式:Zn+1=(Zn)^2+C.(此处Z.C均为复数)所有使得该公式无限迭代后的 ...

  6. FileInputStream.FileOutputStream执行图片复制

    /** * 需求:拷贝一个图片 * 思路: * 1.创建一个字符输入流和图片相关联. * 2.用字节写入流对创建图片文件,用于存储到图片数据. * 3.通过循环续写,完成数据的存储. * 4.关闭资源 ...

  7. 二 random模块

    1 import random 2 3 print(random.random())#(0,1)----float 大于0且小于1之间的小数 4 5 print(random.randint(1,3) ...

  8. Appium+python自动化4-等待函数

    4.1 等待函数癈使用 4.1.1 为什么要使用等待函数 我们在做自动化的时候很多时候都不是很顺利,不是因为app的问题,我们的脚本也没问题,但是很多时候都会报错,比如一个页面本来就有id为1的这个元 ...

  9. C#创建cookie读写cookie

    一.创建cookie HttpCookie cookie = new HttpCookie("UserInfo");//创建多值cookie              cookie ...

  10. 23【notepad++】修改背景颜色

    notepad++是一款功能丰富的编辑器,运行在windows平台上的编辑工具. 但它默认设置是白色背景,黑色文字,长时间看很刺眼.那么怎么设定成为暗色背景,亮色文字呢? 点击,设置->语言格式 ...