js滑动不适用于智能手机

Question

我已经在js上编写了简单的滑动功能。

在台式机上一切正常，但在智能手机上则无法正常工作。

这是我的Javascript：

(function(){
    var project = {
        dragging: false,
        xCordinateDown: null,
        yCordinateDown: null,
        init:function(){
            var swipeObject = document.getElementById('slide');
            swipeObject.addEventListener('mousedown', this.taped);
            swipeObject.addEventListener('mouseup', this.tapedOut);
            swipeObject.addEventListener('mouseleave', this.tapedOut);
            swipeObject.addEventListener('mousemove', this.swiped);
        },
        taped:function(e){
            this.dragging = true;
            this.xCordinateDown = e.clientX;
            this.yCordinateDown = e.clientY;
        },
        tapedOut:function(){
            this.dragging = false;
            this.xCordinateDown = null;
            this.yCordinateDown = null;
            document.getElementById("slide").style.top = 0;
        },
        swiped:function(e){
            if(this.dragging){
                var xCordinate = e.clientX;
                var yCordinate = e.clientY;

                var xDifference = this.xCordinateDown - xCordinate;
                var yDifference = this.yCordinateDown - yCordinate;

                if(Math.abs(xDifference) < Math.abs(yDifference)){
                    if(yDifference < 0){

                        document.getElementById("slide").style.top = Math.abs(yDifference) + 'px';
                    }                     
                }
            }
        }
    }
    project.init();
})();

---

如何在智能手机上修复它？ 问题出在哪儿？

这是jsfiddle： 演示场

提前致谢

Answer 1

使用专用的触摸事件： touchstart ， touchmove ， thouchend 。 您必须知道必须从TouchEvent.targetTouches读取偏移量：

var startCoords = null;
el.addEventListener('touchstart', function(event) {
    startCoords = [
        event.targetTouches[0].pageX,
        event.targetTouches[0].pageY,
    ];
});

而且touchend事件不会为您提供targetTouches 。

我做了一个关于touchstart / mousedown和touchend / mouseup的区别的答案。