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.ajax 用户登录验证代码
Oct 29 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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/04/25 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
小程序日历控件使用方法详解
2018/12/29 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
几个判断型的面试题
2012/07/03 面试题
茶叶生产计划书
2014/01/10 职场文书
暑期培训班策划方案
2014/08/26 职场文书
统计学教授推荐信
2014/09/18 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL