使用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实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 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/04 日漫
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python递归函数特点及原理解析
2020/03/04 Python
什么是python的id函数
2020/06/11 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
公开致歉信
2019/06/24 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis