使用 jQuery 避免鼠标双击
介绍
当用户双击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 1.7的新特性,所以如果你的元素点击事件不止触发一次,这可能是个解决方案哦。多么神奇的方法啊,如有任何疑问请联系我。
英文原文:How-to-Avoid-Double-Clicking-With-jQuery
使用 jQuery 避免鼠标双击的更多相关文章
- jQuery解决鼠标单双击问题
html代码如下: <button>点击</button> JQ代码如下: <script> $(function () { // 编写相关jQuery代码 // ...
- JQuery解决鼠标单双击冲突问题
转自链接:https://www.shuzhiduo.com/A/xl560MKrzr/ 在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单 ...
- jQuery的鼠标事件总结
jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- WPF DataGrid 鼠标双击选中的DataGridRow及Row数据
设置DataGrid的MouseDoubleClick事件 代码 //DataGrid鼠标双击事件 Private void dataGrid_MouseDoubleClick(object send ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- jQuery实现鼠标经过图片变亮效果
在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 实现DevExpress GridControl 只有鼠标双击后才进行修改数据
1. 实现DevExpress GridControl 只有鼠标双击后才进行修改数据:修改GridView.OptionsBehavior.EditorShowMode属性为Click 2. 实现De ...
- [Unity菜鸟] Unity鼠标双击,鼠标函数整理(未完)
1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...
随机推荐
- MUI设置卡头卡位的形式进行切换
这是mui的官方帮助文档,一切问题都能在这里找到http://dev.dcloud.net.cn/mui/ui/解决方案. 下面是MUI官方对卡头卡尾的一些描述: 在mobile app开发过程中,经 ...
- QP(Quote-Printable) 编码
QP(Quote-Printable) 方法,通常缩写为“Q”方法,其原理是把一个 8 bit 的字符用两个16进制数值表示,然后在前面加“=”.所以我们看到经过QP编码 后的文件通常是这 ...
- post和updatebatch区别 delphi
Post是确认当前的修改,而UpdateBatch是把已经确认但是没有存盘的数据写入数据库如果不是使用批量更新的方式的时候,Post的时候,确认的修改直接写入数据库. 我弄了一个例子是ado的.往数据 ...
- EM算法[转]
最大期望算法:EM算法. 在统计计算中,最大期望算法(EM)是在概率模型中寻找参数最大似然估计或者最大后验估计的算法,其中概率模型依赖于无法观测的隐藏变量. 最大期望算法经过两个步骤交替进行计算: 第 ...
- tarjan强连通分量模板(pascal)
友好城市 [问题描述]小 w 生活在美丽的 Z 国. Z 国是一个有 n 个城市的大国, 城市之间有 m 条单向公路(连接城市 i. j 的公路只能从 i 连到 j). 城市 i. j 是友好城市当且 ...
- BZOJ3527:[ZJOI2014]力——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3527 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. 参考:https://ww ...
- Unity3D for VR 学习(4): 自绘摄像机的视口区域锥体
在Unity Editor下,当选择Camera组件后,可呈现出Camera视口区域锥体,非常方便.但是当选择其他物体,如Cube后,就无法得知是否在Camera市口区内了,这里我找到了雨松MOMO的 ...
- php-fpm: hundreds of seconds in the log
favoriteI have nginx+php-fpm web serverSo I've noticed in php5-fpm.log many strange lines:[03-Sep-20 ...
- 解题:APIO 2008 免费道路
题面 我们发现我们可以很容易知道最终完成的生成树中有多少鹅卵石路,但是我们不好得到这棵生成树的结构,所以我们尽量“谨慎”地完成生成树·,最好是一点点加到我们要达到的标准而不是通过删掉一些东西来完成 我 ...
- bzoj1912【Apio2010】patrol 巡逻
题解: 显然需要分类讨论了,首先理解k==0即原图时按照dfs序来说 , 每条边至少走两次: k==1,相当于可以省去dfs回溯时第二次走过某条路径的浪费,所以答案是k==0的答案-直径 : k==2 ...