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

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

  • 相关阅读:
    短信平台README.MD
    电子保单README.MD
    数据结构和算法(二)
    学习java数据结构和算法笔记(一)
    删除SVN信息
    工作中比较经常用到的命令
    Eclipse不正常关闭后,解决闪退问题
    文字接口数据捕获tcpdump
    Swagger2和springMVC整合测试
    SpringMybatis 整合JavaWeb
  • 原文地址:https://www.cnblogs.com/ranran/p/3593912.html
Copyright © 2011-2022 走看看