使用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 相关文章推荐
jQuery中offset()方法用法实例
Jan 16 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JS高级运动实例分析
Dec 20 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
JS写滑稽笑脸运动效果
May 28 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
详解JVM系列之内存模型
Jun 10 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
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
求职推荐信范文
2013/12/01 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
节约用水演讲稿
2014/05/21 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
企业负责人任命书
2014/06/05 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
跑吧孩子观后感
2015/06/10 职场文书
离婚民事起诉状
2015/08/03 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
vue里使用create, mounted调用方法
2022/04/26 Vue.js