阅读背景:

安卓部分机型touch 事件失效的hack方式

来源:互联网 

常规写一段滑动代码,我们可能这么写

 

initEvent: function () {
            this.el.addEventListener("touchstart", this.touchStart.bind(this));
            this.el.addEventListener("touchmove", this.touchMove.bind(this));
            this.el.addEventListener("touchend", this.touchEnd.bind(this));
        },
        touchStart: function (e) {
            var touches = e.touches[0];
            this.startStatus = {
                x: touches.pageX,
                time: Date.now()
            }

            this.validSlide = false;
        },
        touchMove: function (e) {
            var touches = e.touches[0];

            e.preventDefault();

            this.endStatus = {
                x: touches.pageX,
                time: Date.now()
            }

            this.delta = {
                x: this.endStatus.x - this.startStatus.x,
                time: this.endStatus.time - this.startStatus.time
            }

            this.translate(this.delta.x + 'px', 0);
            this.validSlide = true;
        },
        touchEnd: function (e) {
            if (this.validSlide) {
                var deltaX = Math.abs(this.delta.x),
                    dir = this.delta.x / deltaX,
                    con = (deltaX > window.innerWidth / 3 || this.delta.time < 250 && deltaX > 20)
                        && ((this.delta.x > 0 && this.el.querySelector('.prev')) || (this.delta.x < 0 && this.el.querySelector('.next')));
                if (con) {
                    this.translate(dir * window.innerWidth + 'px', this.speed);

                    setTimeout(function () {
                        window.s.trigger('slide', [dir]);
                    }, this.speed);
                } else {
                    this.translate('0px', this.speed);
                }
            }
        },
initEvent: function



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: