使用jQuery避免鼠标双击的解决方案

2019-12-24,,

介绍
当用户双击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双击div可直接修改div中的内容
  • jquery单击事件和双击事件冲突解决方案
  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
  • jQuery实现防止提交按钮被双击的方法
  • jQuery防止click双击多次提交及传递动态函数或多参数
  • jquery ezUI 双击行记录弹窗查看明细的实现方法

《使用jQuery避免鼠标双击的解决方案.doc》

下载本文的Word格式文档,以方便收藏与打印。