通过JS控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能
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控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能的更多相关文章
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
- jQuery绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)
方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- label标签内含有input元素,点击事件会触发两次
**label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...
随机推荐
- JavaScript 面向对象编程之一
一:Class and private And public JS 中的类以 function 进行声明,同时 JS 也支持声明私有 private 和公有 public 成员,只不过跟 C# 不一样 ...
- [13] 弧面(Arc)图形的生成算法
顶点数据的生成 bool YfBuildArcVertices ( Yreal radius, Yreal degree, Yreal height, Yuint slices, Yuint stac ...
- otl中遇到的一些字符数组长度问题
最近做的项目中对于数据库的操作为了有一个统一的操作,所以采用了otl技术作为中间媒介,当然,由于是用了别人的库,所以还是出现了很多问题.通过对问题进行分析,也形成了一些常用问题的处理方法. 在用otl ...
- 第一章 Java常用的并发类
注:本系列博客主要参考于<分布式Java应用:基础与实践>,林昊 著 1.常用的并发集合类 ConcurrentHashMap:线程安全的HashMap的实现 CopyOnWriteArr ...
- UVA 10474 (13.08.04)
Where is the Marble? Raju and Meena love to play with Marbles. They have got a lotof marbles with ...
- HashTable HashMap HashSet区别(java)
Hashtable: 1. key和value都不许有null值 2. 使用enumeration遍历 3. 同步的,每次只有一个线程能够访问 4. 在java中Hashtable是H大写,t小写,而 ...
- Lambda表达式 简介 语法 示例 匿名内部类
在AS中使用 Lambda 表达式 Demo地址:https://github.com/baiqiantao/MultiTypeTest.git Gradle(Project级别)中添加classpa ...
- .NET反射 Type类
不知道大家有过这样类似的编码 ? 1 Type type=typeof(T);//T是传入的类型 这样写已经是在潜意思的使用反射了.不管你是否知道,但是这是事实. Type是一个抽象类,必须进行实例化 ...
- Element table使用技巧详解
1.控制table某些行数不显示 下载附件的需求,有些行有附件,有些没有,所以需要过滤,重点是:Array.filter()使用 <el-card :body-style="{ pad ...
- 国内各视频网站android pad客户端支持分辨率情况初步统计
视频网站名称 800*600 1024*600 1280*800 其他 国际化 备注 优酷 支持 支持 支持 支持 不支持 土豆网 没有pad版的 没有pad版的 没有pad版的 支持 不 ...