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实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
js转义字符介绍
Nov 05 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
js+css实现全屏侧边栏
Jun 16 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
找工作最新求职信
2013/12/22 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Java实现多文件上传功能
2021/06/30 Java/Android
Go 内联优化让程序员爱不释手
2022/06/21 Golang