html选择按键点击后锁死输入框_我的前端工具集(十)按钮点击操作锁

我的前端工具集(十)按钮点击操作锁

liuyuhang原创，未经允许禁止转载

目录

1、需求

很多时候，在用户操作的时候是不按照正常的思路来的，做一个程序的goodcase比较容易，做badcase就比较困难。

在前端的诸多内容中，封装一个统一的操作锁就比较重要，防止重复提交，防止用户在同一个按钮上点个没完。

2、思路

在点击这个问题上，不管点击的是什么，只要提供一个遮罩，比如进度条，比如弹出框，都可以阻止用户继续点击。

但是这个方式比较恶，相当于将整个app都彻底拒绝，本质上将整个app都做成了一个单例的应用，在很多程度上，

这当然是不允许的。

所以，提供一个极小的，起眼的或不起眼的小遮罩，只遮住这个刚刚被点击过的操作按钮或元素，该遮罩提供一定

时间的效果，同时可以以某个条件触发去除该遮罩。

很多时候，这种操作锁都是发生在提交表单的等待时间，可能等待前端校验(通常瞬时)，也可能等待后端回执，来

决定下一步要做什么。常见的做法是在发ajax之前指定一个flag，在该flag的值为A的时候，该操作无法重复，在操作

结束以后，该flag值为B，以此来防止重复提交。

我不确定操作与操作之间的关系，也许点击某一个操作的时候，允许操作A执行，但是不允许操作B执行。

所以，各种点击操作之间，应该有一定的关联关系，而且，一个页面通常会有多个点击来进行，因此需要对每一个

点击进行注册，分别管理上锁，并且可以分别关闭之。

获取当前点击元素相对于父元素的位置，偏移等信息，创建一个新的div，该div允许浮动，并且插入到该点击元素的父元素内。

使其形成一个遮罩，同时给一个简单的表示，表示该操作正在执行，你可以替换成文字，动画，图片，anything...

自己改吧，当然也可以做成一个进度条，一个燃烧特效，一个计时器，都可以......

3、代码

代码如下，都在注释里，手累不想多写了

/**

* 按钮添加遮罩操作锁,该锁为浏览器操作锁,可使用js绕过,ajax中不建议再加额外操作锁,若用户使用js绕过,应在后端再加操作锁

* 本API包括以下内容:

* 1.定义全局变量缓冲区window.clickTimerMap = {};

* 2.注册按钮或click操作的内容到缓冲区,点击后使用矩形半透明遮罩遮挡该按钮防止重复点击

* 3.手动关闭计时器与遮罩的函数removeBtnClick(btnId),该操