我已经在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:DEMO FIDDLE

提前致谢

最佳答案

使用专用的触摸事件:touchstarttouchmovethouchend。您必须知道必须读取TouchEvent.targetTouches的偏移量:

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


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

我对difference on touchstart/mousedown & touchend/mouseup is.的内容做了回答

关于javascript - js滑动不适用于智能手机,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28851419/

10-11 13:42