使用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 相关文章推荐
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
原生JS实现留言板功能
Feb 08 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php之curl设置超时实例
2014/11/03 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JavaScript多线程详解
2015/08/12 Javascript
angular十大常见问题
2017/03/07 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python函数局部变量用法实例分析
2015/08/04 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
工程承诺书怎么写
2014/05/24 职场文书
就业协议书样本
2014/08/20 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
车队安全员岗位职责
2015/02/15 职场文书
安全主题班会教案
2015/08/12 职场文书
Python实现简繁体转换
2021/06/07 Python