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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
jQuery插件制作的实例教程
May 16 Javascript
jquery实现拖动效果
Aug 10 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
html中两种获取标签内的值的方法
Jun 16 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中获得视频时间总长度的另一种方法
2011/09/15 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python放大图片和画方格实现算法
2018/03/30 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python input函数使用实例解析
2019/11/22 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
综合实践活动总结
2014/05/05 职场文书
大学迎新生标语
2014/10/06 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
放牛班的春天观后感
2015/06/01 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python