解决移动端页面的touchstart和touchmove冲突

本文介绍了解决移动端touchstart和touchmove事件冲突的方法。通过设置标志位来区分点击和滑动行为,有效避免了误触导致的用户体验下降。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

解决移动端页面的touchstart和touchmove冲突

最近在写一个小项目,移动端的投票工具,作为一个第一次写移动端的菜鸟,问题出现了:

为什么一滑屏幕就触发了一堆touchstart事件呀(摔!!!)

基本概念

  • touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
  • touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
  • touchend事件:当手指从屏幕上离开的时候触发。

看这个架势很眼熟啊,emmm,,,好像和鼠标的事件很相似

  • mousedown:鼠标按下
  • mousemove:鼠标移动
  • mouseup:鼠标抬起

移动之前触发一次点击是难以避免的,在不使用其他类库的前提下有一个很好的解决方法就是进行判断,然后分类解决

解决方法

这个方法参考了这篇文章 来自segmentfahlt的解决方法

    let flag = true;
    $person.on('touchstart touchmove touchend', (event) => {
        switch (event.type) {
                case 'touchstart':
                    flag = true;
                    reak;
                case 'touchmove':
                    flag = false;
                    break;
                case 'touchend':
                    if(flag){
                        // 点击事件
                    }else{
                    // 滑动事件
                    }
                        default:
                            break;
                    }     
                });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值