关于touch事件的使用（touchStart touchMove touchEnd（不触发 android 4.0以上））滑动的使用

最新推荐文章于 2024-05-21 11:48:08 发布

太难了啊#

最新推荐文章于 2024-05-21 11:48:08 发布

阅读量3.9k

点赞数

分类专栏：前端日常问题小计文章标签： touchend不触发页面滚动禁

本文链接：https://blog.csdn.net/xiaoWebNo/article/details/78432057

版权

5 篇文章 0 订阅

订阅专栏

最近在移动端使用touch事件的时候，遇到了一些问题，下面是一些心得，

手机端经常会有有一些上拉加载，下拉刷新，左右滑动删除的应用场景，在不借助第三方插件的时候，无疑会用到touch事件，在谷歌浏览器开发时并没有出现任何问题，结果在手机端测试时各种问题便出来了，

亲测在 Android 4.0 上面的浏览器手指页面上做滑动操作，然后手指离开，结果不会触发 touchend 事件。同样的操作在 Android 2.x / iOS 却会会正常触发 touchend 事件。

在查阅了网上的资料后发现在touchstart或者touchmove事件里面阻止默认行为后会解决上述问题，代码如下 e.preventDefault();

验证后发现确实可以了，touchend事件可以正常触发，但另一个问题又出来下，在阻止了默认行为后，发现页面滚动效果也没法实现了。

又是一番查阅资料，毕竟对应的比较好scroll等插件都可以实现对应的功能，原来在他们的代码中在禁止掉默认行为的时候都加入判断，

就是在什么样的条件下或者在什么样的行为下我禁止默认行为，以触发对应的touchend事件，反之不操作，

举个例子 w为横向移动距离 h为纵向移动距离

var w = distancex<0?distancex*-1:distancex;
var h = distancey<0?distancey*-1:distancey; 

if (w<h) {  e.preventDefault();    /* 你的代码*/}

意思为纵向距离比较大时候我禁止默认行为，这样对应行为下的touchend事件就会触发，而当x方向滑动距离比较大的时候则不禁止默认行为，对应左右方向的滚动效果也不会被禁止，就实现了对应的需求。

上面也就是抛砖引玉了，根据大家的需求可酌情个更改，有什么更好的方式可以互相交流

关注