使用jQuery避免鼠标双击的解决方案
更新时间：2013年08月21日 09:29:23 作者：
用户双击DOM对象（例如按钮和链接等）时，对于用户交互一直是个麻烦的问题，如果你的元素点击事件不止触发一次，可以参考以下的解决方案
介绍
当用户双击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的新特性，所以如果你的元素点击事件不止触发一次，这可能是个解决方案哦。多么神奇的方法啊，如有任何疑问请联系我。
当用户双击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的新特性，所以如果你的元素点击事件不止触发一次，这可能是个解决方案哦。多么神奇的方法啊，如有任何疑问请联系我。
相关文章
Jquery选项卡想必大家并不陌生，本文为大家介绍个比较实用的jquery TAB选项卡，喜欢的朋友可以学习下2013-08-08
jquery图片放大镜功能的实例代码，需要的朋友可以参考一下2013-03-03
本文给大家介绍jquery设置easyui校验规则的实现代码，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-11-11
jQuery 的选择器可谓之强大无比，本文给大家总结下jQuery选择器之常用元素查找方法，非常不错，感兴趣的朋友一起学习吧2016-08-08
下面小编就为大家带来一篇jQuery自定义元素右键点击事件(实现案例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
在Web开发中,表单提交是一个常见的操作,通过表单提交用户可以向服务器发送数据,jQuery是一个流行的JavaScript库,可以简化处理JavaScript的操作,包括表单提交,在本篇博客中,我们将介绍如何使用jQuery来实现表单提交操作,需要的朋友可以参考下2024-09-09
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
这篇文章主要介绍了JQuery+Bootstrap 自定义全屏Loading插件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了jQuery实现炸裂轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了jquery制作搜狐快站页面效果示例,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了jQuery实现的网页换肤效果,结合完整实例形式分析了jQuery通过修改link标签的href属性值实现换肤效果的相关技巧,需要的朋友可以参考下2016-09-09
最新评论