使用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的ajax提交form表单的两种方法小结(推荐)
下面小编就为大家带来一篇jquery的ajax提交form表单的两种方法小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考2016-05-05Jquery Easyui验证组件ValidateBox使用详解(20)
这篇文章主要为大家详细介绍了Jquery Easyui自定义下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
点击一次上传, 当上传操作结束后才能操作界面,实现方式是通过 ajaxfileuplod 上传文件,需要的朋友参考下吧2018-05-05在jQuery ajax中按钮button和submit的区别分析
昨天在使用jQuery ajax的post方法进行页面传值,无刷新获取数据展示,弄了半天就是没有效果,看了半天也没有语法错误,最后才终于明白问题出在哪里2012-10-10jQuery setTimeout传递字符串参数报错的解决方法
这篇文章主要介绍了jQuery setTimeout传递字符串参数报错的解决方法,需要的朋友可以参考下2014-06-06
最新评论