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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JS中的防抖与节流及作用详解
Apr 01 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
angular2中使用第三方js库的实例
2018/02/26 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
jQuery实现简单评论区功能
2020/10/26 jQuery
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
pytorch forward两个参数实例
2020/01/17 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
内容编辑个人求职信
2013/12/10 职场文书
专业技术职务聘任书
2014/03/29 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis