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获取IE9下拉框默认值问题探讨
Jul 22 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js数组的操作指南
Dec 28 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
用原生js做单页应用
Jan 17 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php日历制作代码分享
2014/01/20 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
js实现碰撞检测
2021/01/29 Javascript
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python实现五子棋游戏
2019/06/18 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
python中最小二乘法详细讲解
2021/02/19 Python
研发工程师的岗位职责
2013/11/18 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
预备党员介绍人意见
2015/06/01 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Django+Celery实现定时任务的示例
2021/06/23 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技