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 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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中的常用魔术方法总结
2013/08/02 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python基于template实现字符串替换
2020/11/27 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
文明村创建实施方案
2014/03/27 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书