关于touch事件的使用（touchStart touchMove touchEnd（不触发 android 4.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方向滑动距离比较大的时候则不禁止默认行为，对应左右方向的滚动效果也不会被禁止，就实现了对应的需求。

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

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

移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件手势事件传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
touchstart ,touchmove, touchend 页面随手指滑动
<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><s ...
Vue 绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件,简单学习后实现如下: 先看代码: <template><div><div class="test" @touch ...
移动端touch事件，实时获取touchmove移动下的最新元素
手指移动实时获取当前的最新元素.不是touchstart的元素.(完整小demo) <!DOCTYPE html> <html lang="en"> < ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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