在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

移动端touchstart、touchmove事件的基本使用的更多相关文章

  1. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  2. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  3. 2014-08-28——移动端,触摸事件 touchstart、touchmove、touchend、touchcancel

    1.Touch事件简介在移动终端上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事 ...

  4. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  5. 关于如何获取移动端 touchmove 事件中真正触摸点下方的元素

    移动端的touchstart, touchmove, touchend三个事件,点击元素并拖动时,获取到了touchmove事件, 但是event.touches[0].target所指向的元素却是t ...

  6. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

  7. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  8. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  9. 关于移动端的Click事件

    在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...

  10. 关于移动端的UI事件分类

    1. click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件,有touchstart touchmo ...

随机推荐

  1. Thinking in java学习笔记之持有对象总结

  2. bzoj 2648 KD-tree

    稍微看了一下KD-tree的讲义,大概明白了它的原理,但是实现不出来... 所以无耻的抄了一下黄学长的... #include<iostream> #include<cstdio&g ...

  3. [C#] 将 List 转 DataTable

    /// <summary> /// Convert a List{T} to a DataTable. /// </summary> private DataTable ToD ...

  4. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  5. <<< Tomcat 部署项目There are no resources that can be added or removed from the server

    错误信息:没有资源可以添加或删除的服务器 解决方式: 方式1.选中项目右键——找到Project Facets——勾选Dynamic Web Project和java 方式2.新建一个同名web项目, ...

  6. 浅谈:java泛型与dao重用

    在进入今天的主题之前,我们先理解一下什么是泛型: 泛型是java中一种类型,泛型是被参数化的类型. 类型-->class 参数化-->class类型可以是任意参数 泛型存在的意义:泛型可以 ...

  7. Level Of Management Protocols - SNMP Tutorial

    30.2 The Level Of Management Protocols Originally, many wide area networks included management proto ...

  8. .Net 中的反射(查看基本类型信息) - Part.2

    反射概述 和Type类 1.反射的作用 简单来说,反射提供这样几个能力:1.查看和遍历类型(及其成员)的基本信息和程序集元数据(metadata):2.迟绑定(Late-Binding)方法和属性.3 ...

  9. Google 地图 API V3 之控件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  10. LINQ驱动数据的查询功能

    一.LINQ概念 LINQ是微软在.NetFramework3.5中新加入的语言功能,在语言中以程序代码方式处理集合的能力. 1.1 LINQ VS 循环处理 在我刚工作时候,对于集合对象的处理一般是 ...