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实现div拖拽宽度示例代码
Jul 31 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
jQuery实现放大镜案例
Oct 19 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
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python中optparse模块使用浅析
2015/01/01 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python 实现多维数组转向量
2019/11/30 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
小学科学教学反思
2014/01/26 职场文书
办公室文员工作职责
2014/01/31 职场文书
十周年庆典策划方案
2014/06/03 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python