使用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 .one()

总结
上面所提到的方法是jQuery 1.7的新特性，所以如果你的元素点击事件不止触发一次，这可能是个解决方案哦。多么神奇的方法啊，如有任何疑问请联系我。

赞 (0)

相关推荐

  • jQuery防止click双击多次提交及传递动态函数或多参数

    今天是写的是关于JQ的双击事件防止多次提交的问题,并且通过函数可以批量定义,通能性更强了,通过方法动态绑定元素的事件.而且可以动态传递函数名或者多参数等(本实例只传递函数名通过Eval调用). 我们都知道在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcl

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • jquery ezUI 双击行记录弹窗查看明细的实现方法

    第一步:给DataGrid绑定onDblClickRow事件: <table title="" id="dataTable" class="easyui-datagrid" style="height: 500px;" data-options=" url: '/ajaxget.aspx?_t='+new Date().getTime()+'&_action=SVNGetHandler.GetSearc

  • jquery ajax双击div可直接修改div中的内容

    jquery ajax双击div可直接修改div中的内容

    最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: <div title="[双击可直接修改]" class="changeSort" id="{$id}">{$sort}</div> JS代码: <script type="text/javascript"

  • jQuery实现防止提交按钮被双击的方法

    本文实例讲述了jQuery实现防止提交按钮被双击的方法.分享给大家供大家参考.具体实现方法如下: $("#submit").one('click', function (event) { event.preventDefault(); //do something $(this).prop('disabled', true); }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jquery单击事件和双击事件冲突解决方案

    jquery单击事件和双击事件冲突解决方案

    本人需要给bootstrap-treeview的树节点添加双击事件.而该插件原生方法中不带双击事件功能.该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突. 编写测试代码 引起冲突的代码: 问题效果展示: 每一次触发双击事件都会引起两次单击事件 解决冲突的代码: 解决问题效果展示: 完美解决单击事件和双击事件冲突问题 这里主要用到两个HTMLDOMWindow对象中函数,settimeout(),clearTimeout() 我这里两个单击事件触发的时间间隔设置在等于300毫秒,

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

    介绍 当用户双击DOM对象(例如按钮和链接等)时,对于用户交互一直是个麻烦的问题. 幸运的是, jQuery 提供了一个相当棒的解决方法. 那就是.one(). .one()这个方法是做什么的? 它附加了一个元素事件的处理程序并且每个元素只能运行一次事件处理器函数. 参数 .one( events [, selector ] [, data ], handler(eventObject) ) events 类型: String •规定添加到元素的一个或多个事件.由空格分隔多个事件.必须是有效的事

  • jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

    jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

    本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html

  • jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015

  • JQuery实现鼠标滚轮滑动到页面节点

    JQuery实现鼠标滚轮滑动到页面节点

    下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <h

  • jQuery实现鼠标经过弹出提示信息的地图热点效果

    jQuery实现鼠标经过弹出提示信息的地图热点效果

    本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果.分享给大家供大家参考.具体如下: 这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&

  • jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im

  • jQuery实现鼠标悬停显示提示信息窗口的方法

    本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 基于jQuery创建鼠标悬停效果的方法

    本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

  • jQuery 实现鼠标画框并对框内数据选中的实例代码

    jQuery 实现鼠标画框并对框内数据选中的实例代码

    jquery库: jquery -1.10.2.min.js,jQuery UI - v1.12.1. jQuery 代码 不多说了,之间上代码.不懂的地方看注释. <script type="text/javascript"> //鼠标按下时的X Y坐标 var mouseDownX; var mouseDownY; //鼠标按下时移动的X Y 坐标 var mouseMoveX; var mouseMoveY; //移动的状态 var isMove = false; /

随机推荐