使用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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
javascript时间函数大全
Jun 30 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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数据采集的详解
2013/06/02 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
JS功能代码集锦
2016/05/04 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
如何基于Python按行合并两个txt
2020/11/03 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
电子商务应届生求职信
2013/11/16 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
活动总结报告范文
2014/05/04 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
村党建工作汇报材料
2014/11/02 职场文书
费城故事观后感
2015/06/10 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS