使用jQuery避免鼠标双击的解决方案


Posted in Javascript onAugust 21, 2013

介绍
当用户双击DOM对象(例如按钮和链接等)时,对于用户交互一直是个麻烦的问题。 幸运的是, jQuery 提供了一个相当棒的解决方法。 那就是.one()。

.one()这个方法是做什么的?
它附加了一个元素事件的处理程序并且每个元素只能运行一次事件处理器函数。

参数
.one( events [, selector ] [, data ], handler(eventObject) )

events
类型: String
•规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。就像“click”和“keydown.myPlugin”一样。

选择器参数
参数类型: String
•选择器字符串用于过滤出被选中的元素中能触发事件的子元素
•如果传null或者省略,当事件到达选定的元素时就会被触发
数据
参数类型: 任何类型
•该参数的值在事件触发将会传递给的事件处理函数
事件处理函数
 参数类型:函数类型
•事件触发时应该调用的函数
•false 也是允许的因为它就是简单return false;函数的简写形式
举例

$("#saveBttn").one("click", function () { 
alert("This will be displayed only once."); 
});

或者
$("body").one("click", "#saveBttn", function () { 
alert("This displays if #saveBttn is the first thing clicked in the body."); 
});上述代码关键在于:

•当代码执行结束时,点击id为saveBtn的元素将会弹出警告框
•之后的点击将没有任何反映
•这等同于 ==>
$("#saveBttn").on("click", function (event) { 
alert("This will be displayed only once."); 
$(this).off(event); 
});

换句话说这和在绑定事件处理函数中显式调用off()作用是一样的

了解更多请点击
jQuery .one()

总结
上面所提到的方法是jQuery 1.7的新特性,所以如果你的元素点击事件不止触发一次,这可能是个解决方案哦。多么神奇的方法啊,如有任何疑问请联系我。

Javascript 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
js密码强度实时检测代码
Mar 02 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
jquery ready(fn)事件使用介绍
Aug 21 #Javascript
javaScript面向对象继承方法经典实现
Aug 20 #Javascript
Table冻结表头示例代码
Aug 20 #Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
jQuery回车实现登录简单实现
Aug 20 #Javascript
jquery 延迟执行实例介绍
Aug 20 #Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
php入门教程 精简版
2009/12/13 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
python 调用有道api接口的方法
2019/01/03 Python
python面向对象 反射原理解析
2019/08/12 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
酒店应聘自荐信
2013/11/09 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
世界红十字日活动总结
2015/02/10 职场文书
单位介绍信格式范文
2015/05/04 职场文书
离婚代理词范文
2015/05/23 职场文书
python小程序之飘落的银杏
2021/04/17 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
DSP接收机前端设想
2022/04/05 无线电
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技