小圆点跟随手指移动,手指移出微信返回标题栏的时候,touchend事件触发不了

新手上路,请多包涵

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

阅读 2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题