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 options属性集合操作代码
Dec 28 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Django实现网页分页功能
2019/10/31 Python
python单例设计模式实现解析
2020/01/07 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
法制宣传口号
2014/06/16 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
大学推普周活动总结
2015/05/07 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers