IOS微信下:当页面的高度小于手机屏幕高度或者页面的scrollTop为0的情况下。手指移出标题栏的时候,touchend事件触发不了。小圆点跟随手指移出去跑没了。scrollTop不为0的时候就算手指移出去了,touchend事件可以执行,可以设置div的style.top值
安卓微信下都没问题
JS代码如下:
var box = document.getElementById('zx-ori');
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight; //
var endTouchY = 0; //手指滑动结束时候的纵坐标
var endTouchX = 0; //手指滑动结束时候的衡坐标
var W = box.offsetWidth; //需要移动小圆点的宽
var H = box.offsetHeight;//需要移动小圆点的高
var halfW = W / 2; //需要移动小圆点的半径
var halfH = H / 2; //需要移动小圆点的半径
var e;
var scrollTop=0;
box.addEventListener('touchstart',function(events){
events.preventDefault();
events.stopPropagation();
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}
else if(document.body){
scrollTop=document.body.scrollTop;
}
this.addEventListener('touchmove', function(events){
e = events.touches[0];
box.style.top = (e.pageY-scrollTop-halfH)+'px';
endTouchY = e.pageY-scrollTop;
box.style.left = (e.pageX-halfW)+'px';
endTouchX = e.pageX;
},false);
this.addEventListener('touchend', function(events){
this.ontouchmove = null;
this.ontouchend = null;
var x = (endTouchX-halfW)>0?(endTouchX-halfW):0; //判断DIV移动超出到左边屏幕的时候,。
var y = (endTouchY-halfH)>0?(endTouchY-halfH):0; //判断DIV移动到屏幕上边的时候,
x = (x>(screenWidth-W))?(screenWidth-W):x; //判断DIV移动超出到右边屏幕的时候。
y = (y>(screenHeight-H))?(screenHeight-H):y;//判断DIV移动到屏幕下边的时候,
box.style.left = x + 'px';
box.style.top = y + 'px';
// alert("有执行touchend函数");
},false);
},false);
对了小圆点是设置posetion:fixed