長按代碼封裝（相容PC和移動端）

/**
 * Created by Farris on 2018-08-20.
 *
 */

export default class LongTap {
    constructor(element, duration) {
        this.element = element;
        this.duration = duration || ;  //長按觸發的時長,預設600毫秒
        this.timer = null;
        this.startEvent = "touchstart";
        this.moveEvent = "touchmove";
        this.endEvent = "touchend";
        this.eventJudge();
    }

    longTap(callback) {
        console.log(this.startEvent, this.moveEvent, this.endEvent);
        this.element.addEventListener(this.startEvent, () => this.touchStart(callback), false);
        this.element.addEventListener(this.moveEvent, () => this.touchMove(), false);
        this.element.addEventListener(this.endEvent, () => this.touchEnd(), false);
    }

    touchStart(callback) {
        let cb = (...args) => typeof callback === "function" && callback(...args);
        this.timer = setTimeout(() => cb(), this.duration);
    }

    touchMove() {
        this.timer && clearTimeout(this.timer);
    }

    touchEnd() {
        this.timer && clearTimeout(this.timer);
    }

    //判斷是移動端還是PC端
    eventJudge() {
        let click = ["mousedown", "mouseout", "mouseup"];
        let touch = ["touchstart", "touchmove", "touchend"];
        let touchSupport = "ontouchstart" in window;
        [this.startEvent, this.moveEvent, this.endEvent] = touchSupport ? touch : click;
    }
} 複制代碼                

使用方法：

const app = new LongTap(document.getElementById("app"), 800);
app.longTap(()=>console.log("長按~~~~~~~"));複制代碼
           

轉載于:https://juejin.im/post/5b7b899a51882542cb40900b