介绍

  当用户双击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的新特性,所以如果你的元素点击事件不止触发一次,这可能是个解决方案哦。多么神奇的方法啊,如有任何疑问请联系我。

  英文原文:How-to-Avoid-Double-Clicking-With-jQuery

使用 jQuery 避免鼠标双击的更多相关文章

  1. jQuery解决鼠标单双击问题

    html代码如下: <button>点击</button> JQ代码如下: <script> $(function () { // 编写相关jQuery代码 // ...

  2. JQuery解决鼠标单双击冲突问题

    转自链接:https://www.shuzhiduo.com/A/xl560MKrzr/ 在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单 ...

  3. jQuery的鼠标事件总结

    jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...

  4. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  5. WPF DataGrid 鼠标双击选中的DataGridRow及Row数据

    设置DataGrid的MouseDoubleClick事件 代码 //DataGrid鼠标双击事件 Private void dataGrid_MouseDoubleClick(object send ...

  6. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  7. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. 实现DevExpress GridControl 只有鼠标双击后才进行修改数据

    1. 实现DevExpress GridControl 只有鼠标双击后才进行修改数据:修改GridView.OptionsBehavior.EditorShowMode属性为Click 2. 实现De ...

  9. [Unity菜鸟] Unity鼠标双击,鼠标函数整理(未完)

    1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...

随机推荐

  1. 求最大子串和以及其中一个子串(java)

    public static void getMaxSum(int[] a){ int max = a[0]; int sum = a[0]; int temp = 0; int start = 0; ...

  2. (二)MySQL中级篇

    1.视图view 视图是一个虚拟表,其内容由查询定义.定义视图的筛选可以来自当前或其它数据库的一个或多个表,或者其它视图. 视图的优点: ①简化了操作,把经常使用的数据定义为视图. ②安全性,用户只能 ...

  3. PAT 甲级 1040 Longest Symmetric String

    https://pintia.cn/problem-sets/994805342720868352/problems/994805446102073344 Given a string, you ar ...

  4. PAT L1-034 点赞

    https://pintia.cn/problem-sets/994805046380707840/problems/994805098188750848 微博上有个“点赞”功能,你可以为你喜欢的博文 ...

  5. mybatis_mysql

    SELECT round(avg(c.AVG_DELAY_TIME)) as AVG_DELAY FROM `result_road_saturation_day` a LEFT JOIN info_ ...

  6. web移动开发最佳实践之js篇

    一.js概述 js即JavaScript,是被设计用来验证表单.检测浏览器.创建cookies.改进设计以及更多应用的网络脚本语言,它非常容易使用.在web应用中,它是主要的编程语言,主要用途是进行各 ...

  7. PHP中与类和对象有关的几个系统函数

    与类有关的系统函数: class_exists(“类名”), 判断一个类是否存在(是否定义过) interface_exists(“接口名”), 判断一个接口是否存在(是否定义过) get_class ...

  8. VS NuGet离线包(缓存包)nupkg安装

    最近项目需要在NuGet添加一个依赖项,无奈公司开发机没网... 说出来各位看官可能不信,做开发的开发机居然没网!!!!!(那你还不赶快离职闪人) 没办法,项目需要还是得把东西扔进VS里面去,只有想办 ...

  9. 对于最近的一些日常总结by520(17.10.18)

    ---天天考试,各种题型都有,学到了很多新的知识,也发现了自己的许多不足---1.首先,自己的搜索需要加强,特别是广搜,10.18的T1裸广搜没有做对.2.数学的思维和一些逻辑问题需要加强,然后就是要 ...

  10. atcoder 2017Code festival C ——D题 Yet Another Palindrome Partitioning(思维+dp)

    题目大意: 把一个字符串s分割成m个串,这m个串满足至多有一种字符出现次数为奇数次,其他均为偶数次,问m的最小值 题解: 首先我们想一下纯暴力怎么做 显然是可以n^2暴力的,然后dp[i]表示分割到i ...