jquery单击事件和双击事件龃龉消除方案,使用jQuery防止鼠标双击的消除方案

正文实例汇报了jQuery实现幸免提交开关被双击的方法。共享给我们供大家参谋。具体完毕形式如下:

本身须求给bootstrap-treeview的树节点增加双击事件。而该插件原生方法中不带双击事件功效。该插件的节点私下认可绑定的单击事件,因而引起了单击事件和双击事件的争执。

介绍
当用户双击DOM对象(举个例子按键和链接等)时,对于用户交互一直是个艰巨的难点。
幸运的是, jQuery 提供了三个相当的棒的消除办法。 那正是.one()。

$("#submit").one('click', function (event) { 
 event.preventDefault();
 //do something
 $(this).prop('disabled', true);
});

编纂测验代码

.one()那几个办法是做哪些的?
它附加了一个因素事件的管理程序並且各种成分只好运营一次事件管理器函数。

期待本文所述对大家的jQuery程序设计有着帮忙。

引起抵触的代码:

参数
.one( events [, selector ] [, data ], handler(eventObject) )

你恐怕感兴趣的篇章:

  • jquery
    ajax双击div可直接修改div中的内容
  • jquery单击事件和双击事件争论消除方案
  • jQuery完毕鼠标双击Table单元格造成文本框及输入内容后更新到数据库的情势
  • jQuery防止click双击数次交付及传递动态函数或多参数
  • 运用jQuery防止鼠标双击的化解方案
  • jquery ezUI
    双击行记录弹窗查看明细的完结方式

必发365手机版 1

events
类型: String
•规定增多到成分的二个或多少个事件。由空格分隔多个事件。必须是可行的轩然大波。如同“click”和“keydown.myPlugin”一样。

难点效果展示:

选用器参数
参数类型: String
•选拔器字符串用于过滤出被入选的成分中能触发事件的子成分
•借使传null大概不难,当事件达到选定的因素时就能被触发
数据
参数类型: 任何项目
•该参数的值在事变触发将会传递给的事件管理函数
事件管理函数
 参数类型:函数类型
•事件触发时应该调用的函数
•false 也是允许的因为它便是简单return false;函数的简写情势
举例

必发365手机版 2

复制代码 代码如下:

每贰回接触双击事件都会唤起三回单击事件

$(“#必发365手机版,saveBttn”).one(“click”, function () {
alert(“This will be displayed only once.”);
});

化解争辨的代码:

或者

必发365手机版 3

复制代码 代码如下:

消除难题效果体现:

$(“body”).one(“click”, “#saveBttn”, function () {
alert(“This displays if #saveBttn is the first thing clicked in the
body.”);
});上述代码关键在于:

必发365手机版 4

•当代码推行完结时,点击id为saveBtn的要素将会弹出警告框
•之后的点击将从未其他反映
•那等同 ==>

一应俱全消除单击事件和双击事件抵触难点

复制代码 代码如下:

此处根本用到四个HTMLDOMWindow对象中等高校函授数,settimeout(),clearTimeout()

$(“#saveBttn”).on(“click”, function (event) {
alert(“This will be displayed only once.”);
$(this).off(event);
});

必发365手机版 5

换句话说那和在绑定事件管理函数中显式调用off()功能是同等的

笔者那边多个单击事件触发的时刻距离设置在相当300纳秒,这里须求基于实际情况而定。

打探越来越多请点击
jQuery .one()

源码如下:

总结
上边所波及的格局是jQuery
1.7的新特色,所以借令你的元素点击事件不断触发叁回,那大概是个缓和方案哦。多么奇妙的办法啊,如有任何疑问请联系小编。

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title></title>
 </head>

 <body>
  <div>事件监控</div>
 </body>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript">
  /*$(function() {
     $("div").bind("click.a", function() { //单击事件 
      $("body").append("<p>click事件</p>");
     })
     $("div").bind("dblclick.a", function() { //双击事件 
      $("body").append("<p>dblclick事件</p>");
     })
     $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
      $("body").append("<p>mouseover事件</p>");
     })
     $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
      $("body").append("<p>mouseout事件</p>");
     })
    })*/
  $(function() {
   var timer = null;
   $("div").bind("click.a", function() { //单击事件 
    clearTimeout(timer);
    timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
     $("body").append("<p>click事件</p>");
    }, 300);
   })
   $("div").bind("dblclick.a", function() { //双击事件 
    clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理 
    $("body").append("<p>dblclick事件</p>");
   })
   $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
    $("body").append("<p>mouseover事件</p>");
   })
   $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
    $("body").append("<p>mouseout事件</p>");
   })
  })
 </script>

</html>

你或然感兴趣的稿子:

  • jquery
    ajax双击div可径直修改div中的内容
  • jquery单击事件和双击事件争辨消除方案
  • jQuery达成鼠标双击Table单元格造成文本框及输入内容后更新到数据库的主意
  • jQuery完结防止提交开关被双击的措施
  • jQuery制止click双击数十次交给及传递动态函数或多参数
  • jquery ezUI
    双击行记录弹窗查看明细的落到实处情势

如上便是jquery单击和双击事件冲突化解方案,希望对我们的学习抱有协理。

你只怕感兴趣的稿子:

  • jquery
    ajax双击div可径直修改div中的内容
  • jQuery达成鼠标双击Table单元格形成文本框及输入内容后更新到数据库的点子
  • jQuery实现防止提交按键被双击的章程
  • jQuery幸免click双击多次交给及传递动态函数或多参数
  • 运用jQuery防止鼠标双击的化解方案
  • jquery ezUI
    双击行记录弹窗查看明细的落实方式

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website