使用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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
js实现筛选功能
Nov 24 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python机器学习之神经网络(三)
2017/12/20 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
Linux的文件类型
2016/07/05 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
中文专业自荐书
2014/06/29 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
介绍长城的导游词
2015/01/30 职场文书
防汛通知
2015/04/25 职场文书
七年级作文之冬景
2019/11/07 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
html中两种获取标签内的值的方法
2022/06/16 jQuery