jQuery防止click双击多次提交及传递动态函数或多参数


Posted in Javascript onApril 02, 2014

今天是写的是关于JQ的双击事件防止多次提交的问题,并且通过函数可以批量定义,通能性更强了,通过方法动态绑定元素的事件。而且可以动态传递函数名或者多参数等(本实例只传递函数名通过Eval调用)。

我们都知道在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。

先看一下点击事件的执行顺序:

单击(click):mousedown,mouseout,click;
双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick;

在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

如此这般的话,只需消灭掉多余的一次单击事件(click),这个问题就解决了。

效果如下图:
http://images.cnitblog.com/i/554071/201404/010846579687197.png
源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jQuery防止click双击多次执行及传递动态函数方法</title> 
<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script> 
</head> <body> 
<div id="show">显示测试结果:</div> 
<div style="background:#f60;color:#fff;width:80px;padding:10px 20px;" id="div" onclick="ss1('DIV事件')">点击我吧</div> 
<input type="button" value="按钮一" id="but1" onclick="ss2('INPUT事件')"/> 
<script language="javascript"> 
function std (obj,vs){ 
var TimeFn = null; 
var funs=$(obj).attr("onclick"); 
$(obj).click(function() { 
clearTimeout(TimeFn); 
TimeFn = setTimeout(function(){ 
eval(funs); 
clearTimeout(TimeFn); 
}, 400); 
}); 
$(obj).dblclick(function() { 
clearTimeout(TimeFn); 
}); 
$(obj).removeAttr("onclick"); 
} 
var ss1=function(s){$("#show").html("DIV显示测试结果:"+s);alert("a");};//div调用的方法 
var ss2=function(s){$("#show").html("INPUT显示测试结果:"+s);alert("b");};//input调用的方法 
//通过方法动态绑定元素的事件 
std("#div","div"); 
std("#but1","button1"); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 #Javascript
js 日期比较相关天数代码
Apr 02 #Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 #Javascript
网页广告中JS代码的信息监听示例
Apr 02 #Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 #Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python实现调用其他python脚本的方法
2014/10/05 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
python单例模式的多种实现方法
2019/07/26 Python
Numpy之reshape()使用详解
2019/12/26 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
大专生自我评价
2014/01/28 职场文书
基层党员对照检查材料
2014/08/25 职场文书
老兵退伍标语
2014/10/07 职场文书
五好家庭申报材料
2014/12/20 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
岳麓书院导游词
2015/02/03 职场文书
后勤工作个人总结
2015/02/28 职场文书
通知范文怎么写
2015/04/16 职场文书
病危通知单
2015/04/17 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
golang import自定义包方式
2021/04/29 Golang