移动端touchstart、touchmove事件的基本使用

在pc端，我们通常使用$(window).scroll()事件来监听元素的位置，来做一些入场动效，如：

$(window).scroll(function(){var panel3Move = document.getElementById('panel3').offsetTop <= ($(window).scrollTop() + 656);panel3Move && move('.panel1-man .man2').set('opacity', '1').duration('2.8s').end();
}

那么在移动端开发中，也经常有手指滑动时做相关处理的需求，如下滑时导航条吸顶、上滑时又恢复原态，下拉刷新、上拉加载更多等等.. 可是window对象的scroll事件在移动端有个致命的缺点：“必须手指松开才能触发”！，用户体验非常差劲，幸运的是移动端提供了touch系列事件，问题也就迎刃而解了..

思路：开启touchStart、touchMove或者touchEnd的事件监听，当手指按下的时候记录初始位置，再根据滑动后的位置做减法，即可以判断上滑/下滑，再处理相应的业务逻辑

代码片段：

　　　　　options: {startX: null,startY: null},touchStart: function(event){var self = touchMain;try{var touch = event.touches[0], //获取第一个触点x = Number(touch.pageX), //页面触点X坐标y = Number(touch.pageY); //页面触点Y坐标//记录触点初始位置self.options.startX = x;self.options.startY = y;}catch(e){console.log(e.message)}},/*** 滑动时判断下滑、上滑* @param  {[type]} event        * @param  {[type]} upcallback   [上滑回调函数]* @param  {[type]} downcallback [下滑回调函数]*/touchMove: function(event,upcallback,downcallback){var self = touchMain;try{var touch = event.touches[0], //获取第一个触点x = Number(touch.pageX), //页面触点X坐标y = Number(touch.pageY); //页面触点Y坐标//判断滑动方向if (y - self.options.startY > 0) {//console.log('下滑了！');downcallback && downcallback();}else{//alert('上滑了！');upcallback && upcallback();}}catch(e){console.log('滑动时出错:',e.message)}},

使用：

　　　　　　//下滑显示、上滑隐藏require(['touch'],function(){var $getTicktImgSection = $('#getTicktImgSection');document.addEventListener('touchstart',window.touchMain.touchStart,false);document.addEventListener('touchmove',function(event){window.touchMain.touchMove(event,function(){//上滑$getTicktImgSection.css({'right':'-800px'})},function(){//下滑$getTicktImgSection.css({'right':'1em'})})},false);})

完整代码：https://github.com/helijun/component/tree/master/touch

转载于:https://www.cnblogs.com/liliangel/p/6051248.html

移动端touchstart、touchmove事件的基本使用相关推荐

关于移动端的touch事件（touchstart， touchmove， touchend，touchcancel）
移动端的touch事件四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchc ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
移动端的touch事件(touchstart、touchmove)以及如何取得滑过元素的id
$('.jump-tag').bind("touchstart touchmove", function (e) { }); $('.jump-tag').bind("t ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
关于touch事件的使用（touchStart touchMove touchEnd（不触发 android 4.0以上））滑动的使用
最近在移动端使用touch事件的时候,遇到了一些问题 ,下面是一些心得, 手机端经常会有有一些上拉加载,下拉刷新, 左右滑动删除的应用场景, 在不借助第三方插件的时候,无疑会用到touch事件,在谷歌 ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
移动端触摸相关事件踩坑（touchmove默认事件以及passive）
移动端移动事件监听(touch.默认行为) 最近在写一个移动端网页中会遇到滑动事件监测问题,来解决用户在canvas画布中移动效果 touchmove.默认触发事件e.preventDefault() ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
移动端关闭浏览器事件_前端开发中什么是移动端点透事件？
点透事件:是指两个元素其中一个元素具有默认的点击事件,当我们让不具有点击事件的元素隐藏起来,会触发另一个元素的点击事件,这种行为被称之为点透事件. 如下图所示:当我们给div元素添加touchstar ...

移动端touchstart、touchmove事件的基本使用

移动端touchstart、touchmove事件的基本使用相关推荐

最新文章

热门文章