使用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动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
openlayers4实现点动态扩散
Aug 17 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
超级简单的发送邮件程序
2006/10/09 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
JS编程小常识很有用
2012/11/26 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python中return语句用法实例分析
2015/08/04 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL