使用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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Python中字符串的常见操作技巧总结
2016/07/28 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python元组常见操作示例
2019/02/19 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
中英文求职信范文
2014/01/27 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
仓管员岗位责任制
2014/02/19 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
中学生英语演讲稿
2014/04/26 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
经典团队口号
2014/06/06 职场文书
2016年端午节寄语
2015/12/04 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL