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不同页面传值的改进版
Sep 30 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
Javascript window对象详解
Nov 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
vue.js语法及常用指令
Oct 29 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JS实现的雪花飘落特效示例
Dec 03 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
Yii2 批量插入、更新数据实例
2017/03/15 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
Angular使用Md5加密的解决方法
2017/09/16 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
解析Python中的异常处理
2015/04/28 Python
Python 爬虫图片简单实现
2017/06/01 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
浅析python连接数据库的重要事项
2021/02/22 Python
什么是servlet
2012/05/08 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
上班迟到检讨书
2014/09/15 职场文书
学习十八大标语
2014/10/09 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL