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中“+=”的应用
Feb 02 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
javascript实现蒙版与禁止页面滚动
Jan 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自动加载autoload机制示例分享
2014/02/20 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
javascript编程起步(第三课)
2007/02/27 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
Js apply方法详解
2017/02/16 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
python获得图片base64编码示例
2014/01/16 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
《雨点儿》教学反思
2014/04/14 职场文书
党支部承诺书
2015/01/20 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
Redis的字符串是如何实现的
2021/10/24 Redis
JavaScript实现优先级队列
2021/12/06 Javascript
sql注入报错之注入原理实例解析
2022/06/10 MySQL