使用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 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
webpack3之loader全解析
Oct 26 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
layer弹出层扩展主题的方法
Sep 11 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性能优化 产生高度优化代码
2011/07/22 PHP
探讨php中header的用法详解
2013/06/07 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
axios基本入门用法教程
2017/03/25 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
详解python中*号的用法
2019/10/21 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
团代会主持词
2014/04/02 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
python画条形图的具体代码
2022/04/20 Python