zoukankan      html  css  js  c++  java
  • js 触发长按事件

    <button id="btn1">长按触发</button>
    <button id="btn2">长按触发2</button>
    
    interface IOpt {
      el: HTMLElement;
      listener: EventListener;
      options?: boolean | AddEventListenerOptions;
    }
    
    function createBingEvent(event: boolean, types: string[]) {
      return ({ el, listener, options }: IOpt): Promise<IOpt> => {
        return new Promise((res) => {
          if (!event) return res({ el, listener, options });
    
          let timer: number | null;
          const clearTimer = () => {
            if (timer) {
              clearTimeout(timer);
              timer = null;
            }
          };
    
          types.forEach((type, index) => {
            el.addEventListener(
              type,
              (e) => {
                if (index === 0) {
                  if (timer) clearTimer();
                  timer = window.setTimeout(() => listener.call(el, e), 500);
                } else {
                  clearTimer();
                }
              },
              options
            );
          });
        });
      };
    }
    
    const pointTypes = ["pointerdown", "pointerup", "pointercancel"];
    const touchTypes = ["touchstart", "touchend", "touchcancel"];
    const mouseTypes = ["mousedown", "mouseup"];
    const chainPointerEvent = createBingEvent(!!window.PointerEvent, pointTypes);
    const chainTouchEvent = createBingEvent(!!window.TouchEvent, touchTypes);
    const chainMouseEvent = createBingEvent(!!window.MouseEvent, mouseTypes);
    
    export function bindLongEvent(
      el: HTMLElement,
      listener: EventListener,
      options?: boolean | AddEventListenerOptions
    ) {
      Promise.resolve({ el, listener, options })
        .then(chainPointerEvent)
        .then(chainTouchEvent)
        .then(chainMouseEvent);
    }
    
    bindLongEvent(document.getElementById("btn1")!, function (this: any, e) {
      console.log(this);
      console.log(e.type);
      console.log("触发长按事件");
    });
    bindLongEvent(document.getElementById("btn2")!, function (this: any, e) {
      console.log(this);
      console.log("hello world");
    });
    
  • 相关阅读:
    像asp.net Mvc一样开发nodejs+express Mvc站点
    js数组方法大全
    自己的时间规划
    7月暑假生活总结
    01. What Is Discrete Mathematics(中英字幕 by Ocean-藏心)
    找工作专题---二分查找
    angular.js 入门基础
    WCF实例管理
    是技术牛人,如何拿到国内IT巨头的Offer
    python
  • 原文地址:https://www.cnblogs.com/ajanuw/p/12743024.html
Copyright © 2011-2022 走看看