使用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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
小程序实现五星点评效果
Nov 03 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
js实现录音上传功能
2019/11/22 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python中文编码那些事
2014/06/25 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python查看列的唯一值方法
2018/07/17 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python控制台实现交互式环境执行
2020/06/09 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
天堂的孩子观后感
2015/06/11 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python