使用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 相关文章推荐
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
node.js中express-session配置项详解
May 31 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
JS代码编译器Monaco使用方法
Jun 11 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python序列类型种类详解
2020/02/26 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
python中id函数运行方式
2020/07/03 Python
Python 防止死锁的方法
2020/07/29 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android