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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python数据类型学习笔记
2016/01/13 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
家长会演讲稿范文
2014/01/10 职场文书
年会活动策划方案
2014/01/23 职场文书
仓库主管岗位职责
2014/03/02 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014年节能工作总结
2014/12/18 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS