zoukankan      html  css  js  c++  java
  • javascript避免dom事件重复触发

    /**
    * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景
    * @param {String} domID 要添加事件的控件ID
    * @param {String} eventName 要添加的事件, 例如: click, dblclick, 不可写成onclick, ondblclick
    * @param {Function} callback 触发事件所要执行的函数, 对于有参数的函数, 需要包含在一个匿名函数中, 匿名函数中是对目标函数的调用, 对于无参数函数, 直接传目标函数名称即可
    * @param {Number} interval 事件的时间间隔, Number类型或String类型的数字皆可
    */
    function addLimitedEvent( domID, eventName, callback, interval ) {
      var _dom = document.getElementById( domID );

      if ( Number.isNaN( Number.parseInt( interval ) ) )
        interval = 1;
      else
        interval = Number.parseInt( interval );

      if ( _dom.addEventListener )
        _dom.addEventListener( eventName, removeLimitedEvent );
      else
        _dom.attachEvent( 'on' + eventName, removeLimitedEvent );

      function removeLimitedEvent() {
        callback();

        if ( _dom.removeEventListener )
          _dom.removeEventListener( eventName, removeLimitedEvent );
        else
          _dom.detachEvent( 'on' + eventName, removeLimitedEvent );

        setTimeout( function () {
          addLimitedEvent( domID, eventName, callback );
        }, interval * 1000 );
      }
    }

    /*函数使用方法*/

    addLimitedEvent('btn_Test','click',function(){handler('a','b')},1);

    addLimitedEvent('btn_Test','click',handler,1);

  • 相关阅读:
    洛谷 P1474 货币系统 Money Systems 题解
    洛谷 P5146 最大差值 题解
    洛谷 P1880 [NOI1995]石子合并 题解
    洛谷 P1063 能量项链 题解
    洛谷 P3385 【模板】负环 题解
    洛谷 P1522 牛的旅行 Cow Tours 题解
    洛谷 P2212 [USACO14MAR]浇地Watering the Fields 题解
    浅谈 C 语言中模块化设计的范式
    内联函数(Inline Functions)
    C++中全局变量的声明和定义
  • 原文地址:https://www.cnblogs.com/JosephBee/p/9699788.html
Copyright © 2011-2022 走看看