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中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
jQuery实现简单全选框
Sep 13 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 变量类型的强制转换
2009/10/23 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python机器人行走步数问题的解决
2018/01/29 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python 实现矩阵填充0的例子
2019/11/29 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
前台文员职责范本
2014/03/07 职场文书
士力架广告词
2014/03/20 职场文书
甘南现象心得体会
2014/09/11 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
创业计划书之美容店
2019/09/16 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript