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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
jquery中动态效果小结
Dec 16 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php的4种常见运行方式
2015/03/20 PHP
php实现将Session写入数据库
2015/07/26 PHP
php实现Session存储到Redis
2015/11/11 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
教你用Python写安卓游戏外挂
2018/01/11 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python plotly绘制直方图实例详解
2019/07/22 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
英文求职信结束语大全
2013/10/26 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
土地转让协议书范本
2014/04/15 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
同志主要表现材料
2014/08/21 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
python实现双向链表原理
2022/05/25 Python
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang