使用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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
vue中的过滤器实例代码详解
Jun 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
党员查摆剖析材料
2014/10/10 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
毕业酒会致辞
2015/07/29 职场文书
感恩教师主题班会
2015/08/12 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python