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 相关文章推荐
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
javascript实现简易计算器
Feb 01 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
JS实现进度条动态加载特效
Mar 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
原生js实现放大镜
2017/02/20 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
简历的个人自我评价范文
2014/01/03 职场文书
自我评价的写作规则
2014/01/06 职场文书
影子教师研修方案
2014/06/14 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
党校党性分析材料
2014/12/19 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python