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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
PHP排序算法类实例
2015/06/17 PHP
分享PHP守护进程类
2015/12/30 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
php常用正则函数实例小结
2016/12/29 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python多线程实例教程
2014/09/06 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python多线程实现TCP服务端
2019/09/03 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
传媒专业推荐信范文
2013/11/23 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
销售行政专员职责
2014/01/03 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
python 中的@运算符使用
2021/05/26 Python