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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
script标签属性用type还是language
Jan 21 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
smarty内置函数section的用法
2015/01/22 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
js的with语句使用方法
2007/09/21 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
JavaScript数组去重的几种方法
2019/04/07 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python实现剪切功能
2019/01/23 Python
浅谈django channels 路由误导
2020/05/28 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
前台文员岗位职责
2013/12/28 职场文书
房地产广告词大全
2014/03/19 职场文书
世界文化遗产导游词
2015/02/13 职场文书
音乐课外活动总结
2015/05/09 职场文书
孙振耀退休感言
2015/08/01 职场文书
法院执行局工作总结
2015/08/11 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
MySQL去除密码登录告警的方法
2022/04/20 MySQL