1、使用情景模拟:下单(防止用户无脑狂点)、支付(防止用户无脑点击支付)、发表评论(防止用户无脑点击),当然如果你用了一个提示框进行屏蔽,下面代码可以无视了,右上角谢谢。

2、默写情景比如:比如发表评论页面,你不希望使用提醒框来增加用户发表步骤的复杂性,那么可以参考下面通过时间间隔控制【提交】按钮的时间间隔有效性,来解决这个问题。

3、效果图:下图1是还没点击发送,图2是点击了发送,服务器需要时间处理,没处理完成之前用户再次点击【发送中】,是不会触发【发送】事件的,从而控制了【用户无脑点击】产生的多余垃圾事件数据。

1

2

HTML代码(wxml类似):核心使用setTimeOut函数

<script type="text/javascript">
document.write(sumdemo(1, 2));
var btn = document.getElementById('btn');
btn.onclick = function() {
this.disabled = 'disabled';
setTimeout(function() {
btn.disabled = '';
}, 2000);//2秒后才能点击
};
</script>

通过JS控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能的更多相关文章

  1. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  2. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  3. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

  4. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  5. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  6. 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)

    方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...

  7. 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  8. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  9. label标签内含有input元素,点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

随机推荐

  1. Maven实战(四)——基于Maven的持续集成实践

    Martin的<持续集成> 相信非常多读者和我一样.最早接触到持续集成的概念是来自Martin的著名文章<持续集成>.该文最早公布于2000年9月,之后在2006年进行了一次修 ...

  2. jdbc连接rac的oracle数据库

    jdbc连接rac的oracle数据库需要配置所有racIP,如下: DB1 =(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(H ...

  3. NLP十大里程碑

    NLP十大里程碑 2.1 里程碑一:1985复杂特征集 复杂特征集(complex feature set)又叫做多重属性(multiple features)描写.语言学里,这种描写方法最早出现在语 ...

  4. 非常优秀的iphone学习文章总结!

    This site contains a ton of fun tutorials – so many that they were becoming hard to find! So I put t ...

  5. 【BZOJ】【2946】【POI2000】公共串

    后缀数组 好感动,复习了下后缀数组居然写出来了……(感谢ykz大神) 求最长公共子串……WA了一发是因为:[不同字符串之间要用不同的特殊字符隔开]否则就会匹配到相同→_→比如都是aaa结尾,如果用相同 ...

  6. 用Spark向HBase中插入数据

    java代码如下: package db.insert; import java.util.Iterator; import java.util.StringTokenizer; import org ...

  7. C++分布式实时应用框架——系统管理模块

    一个分布式实时系统集群动辄上百台机器,集群的规模已经限定这将是一个”封闭“的系统.你不可能再一台台去操作上百台机器,传统的人工运维方式早已不能满足当下需要,所有对集群或者集群中某个节点的操作都必需通过 ...

  8. 比较全的OA系统功能模块列表

    如何判断一款协同OA软件,是否智能,是否注重细节,是否足够成熟呢?产品的设计优势.功能特性,需要我们总结,也需要让更多的用户了解.功能到底强在哪里?下文中将给出一个详尽的答案. 软件安装 傻瓜化向导式 ...

  9. Triangular numbers

    http://codeforces.com/problemset/problem/47/A Triangular numbers time limit per test 2 seconds memor ...

  10. GridControl 获取某分组的第一个孩子

    int iGroupRowHandle = this.gridControlView.FocusedRowHandle; ) { int iChildCount = this.gridControl. ...