按钮连续点击&重复提交
浏览量:408
关于ajax重复提交，已经是老生常谈了，相信各位早已有N种不同的解决方法了。
既然已经解决了重复提交的问题，那按钮连点也不存在什么问题了吧，为什么还要单独拿出来说呢？
最近在做客户端开发的时候，遇到一些连点的问题。比如，点击某个按钮会调起一个webview来装载一个页面，调起webview的操作是异步的，但是完全没有"调起中"和"调起后"的回调或状态，这样就没办法在"调起中"这种状态下阻止用户的下一次点击。
表现出来的现象是，用户点击过快的情况下，会连开几个页面。
既然无法在过程中控制，那就只能在源头控制了：控制点击事件的触发频率。
很自然的我们想到了stopImmediatePropagation，它可以阻止"同一个节点(还有后续节点)上其它相同事件监听函数"的触发。
但是也有一些它阻止不了的，比如在本次绑定监听函数之前绑定的监听函数，这么说有点绕，举个例子：
这种情况下，第一次绑定的console.log(1)是阻止不了的。
这种情况也好办，在公共文件的头部，加上这个事件阻止就万事大吉了。
但还有另外一种情况：利用事件冒泡绑定的函数。这种情况就比较蛋疼了。因为你要确切的知道这个冒泡事件绑定的父节点，在这个父节点绑定一个相同类型的事件监听，才能阻止其他相同节点上事件监听函数的触发。
在项目开始阶段注意这个问题就好办了，统一一下这个父节点的class，然后统一绑定一个限制频率的监听函数。
到了项目优化阶段才意识到这个问题，改动成本就有些大了。
最后贴一下限制频率的监听函数(以class为"js-a"的节点为目标节点，class为"js-parent"的节点为事件委托的父节点)：
神回复
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。