javascript - 小圆点跟随手指移动,手指移出微信返回标题栏的时候,touchend事件触发不了
PHP中文网
PHP中文网 2017-04-11 12:38:03
[JavaScript讨论组]

IOS微信下:当页面的高度小于手机屏幕高度或者页面的scrollTop为0的情况下。手指移出标题栏的时候,touchend事件触发不了。小圆点跟随手指移出去跑没了。scrollTop不为0的时候就算手指移出去了,touchend事件可以执行,可以设置p的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; //判断p移动超出到左边屏幕的时候,。
    var y = (endTouchY-halfH)>0?(endTouchY-halfH):0; //判断p移动到屏幕上边的时候,
    x = (x>(screenWidth-W))?(screenWidth-W):x; //判断p移动超出到右边屏幕的时候。
    y = (y>(screenHeight-H))?(screenHeight-H):y;//判断p移动到屏幕下边的时候,
    box.style.left = x + 'px';
    box.style.top = y  + 'px';

// alert("有执行touchend函数");

},false);

},false);
对了小圆点是设置posetion:fixed

PHP中文网
PHP中文网

认证0级讲师

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号