我已经在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
提前致谢
最佳答案
使用专用的触摸事件:touchstart
,touchmove
,thouchend
。您必须知道必须读取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/