使用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 相关文章推荐
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
常用jQuery代码分享
2015/07/14 Javascript
js命名空间写法示例
2015/12/18 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
幼儿园母亲节活动方案
2014/03/10 职场文书
决心书范文
2014/03/11 职场文书
企业总经理任命书
2014/06/05 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android