关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题

本文探讨了在iPhone上使用touch事件动态调整元素位置时出现的初始位置偏移到(0,0)的问题。尽管在Android和电脑上没有问题,但在iOS设备上,元素首次移动时会出现在屏幕顶部。分析原因可能是由于百分比定位和touch事件的交互。解决方法是通过JavaScript在元素加载时设置其具体位置,确保在iOS上的首次触摸拖动不会出现位置偏差。需要注意的是,`getBoundingClientRect()`方法在元素或其父元素不可见时返回的位置信息可能不准确。" 121568410,5731334,使用Python和Flask搭建博客:MySQL与Redis配置实战,"['flask', 'python', 'mysql', 'redis']
摘要由CSDN通过智能技术生成

写这个么个题目好像,有点晦涩。直接来张gif图就知道,主要是是当手指触摸到元素时,元素的初始位置变成了left:0, top:0;


 

js 设置监听事件 都是 一样的套路 

 

touch.addEventListener('touchstart', function(evtend) {}, false);
touch.addEventListener('touchmove', function(evtend) {}, false);
touch.addEventListener('touchend', function(evtend) {}, false);

 

 

在事件里添加 进行位置的动态改变,首先就需要获得手指的初始位置,手指移动的位置,手机touch 当前元素的位置;

 

            var endpst = {}, //结束位置
                elepst= {}, 
                start={}; //初始位置

            item.addEventListener('touchstart', function(event) {
                if(event.targetTouches.length > 1) return;
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值