使用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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
vue地区选择组件教程详解
May 04 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/05/16 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js继承的实现代码
2010/08/05 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
python在不同层级目录import模块的方法
2016/01/31 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python 切分数组实例解析
2019/11/07 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
公司投资建议书
2014/05/16 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS