touch事件之上下左右滑

var startX, startY, moveEndX, moveEndY;
$(‘body‘).on(‘touchstart‘, function(e) {
  e.preventDefault();
  startX = e.touches[0].pageX,
  startY = e.touches[0].pageY;
});
$(‘body‘).on(‘touchmove‘, function(e) {
  e.preventDefault();
  moveEndX = e.touches[0].pageX,
  moveEndY = e.touches[0].pageY,
  X = moveEndX - startX,
  Y = moveEndY - startY;
   if (Math.abs(X) > Math.abs(Y) && X > 0) {//从左往右滑
    doSomethingOne();
  }else if (Math.abs(X) > Math.abs(Y) && X < 0) {//从右往左滑
    doSomethingTwo();
  }else if(Math.abs(Y) > Math.abs(X) && Y > 0) {//从上往下滑
    doSomethingThree();
  }else if(Math.abs(Y) > Math.abs(X) && Y < 0) {//从下往上滑
    doOtherThingFour();
  }
});
时间: 2024-08-11 01:35:44

touch事件之上下左右滑的相关文章

H5案例分享:移动端滑屏 touch事件

移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发.touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动.touchend: //从屏幕上移开

H5案例分享:移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

通过html5 touch事件封装手势识别组件

html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown,mousemove,mouveup非常类似,不同的是touch事件可以有多个点击的点,而鼠标每次只有一个点,我们即然是做组件封装,就要考虑在pc上调试的情况,否则用手机调试非常不方便,通过对mouse事件的处理,可以一套代码同时兼容pc端和移动端. 下面来逐步封装一个滑动手势(swipe)的组件

移动端 Touch 事件

在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touches:表示当前跟踪的触摸操作的touch对象的数组. targetTouches:特定于事件目标的Touch对象的数组. changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组. 每个touch事件包含下面的属性: clientX:触摸目标在视口中的x坐标. clientY

对touch事件传递的简单理解

对View事件传递的理解,看的这篇. 对事件传递有了大致的了解.onInterceptTouchEvent 函数决定是否将事件拦截,拦截之后,该控件的所有子控件接收不到这个事件.onTouchEvent 函数判断是否消费此事件,在父控件把事件传递到子控件的过程中,假设都没有拦截,那么消息会传递到底层控件,底层控件可以选择消费或者不消费,如果消费,那么事件到此终止,如果没有消费,则一层一层传递给父类.如果中途被拦截了,那么拦截的那个控件充当上述过程的底层控件.最重要的,在这个过程中,事件所经过的控

HTML在移动端页面设计是touch事件注意事项

HTML在移动端页面设计是touch事件注意事项 移动端touch事件 当用户手指放在移动设备在屏幕上滑动会触发的touch事件•touchstart——当手指触碰屏幕时候发生.不管当前有多少只手指•touchmove——当手指在屏幕上滑动时连续触发.通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动•touchend——当手指离开屏幕时触发•touchcancel——系统停止跟踪触摸时候会触发.例如在触摸过程中突然页面alert()一个提

移动端touch事件的使用

一.支持webkit的touch事件 pc上的web页面鼠标会产生 iphone.ipod  Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 1.touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 2.touchmove--当手指在屏幕上滑动时连续触发.通常我们再滑屏页面,会调用event的preventDefault()可以阻

移动端事件——移动端滑屏切换的幻灯片(一)

在我们开始用原声JS写移动端轮播前,我们先了解一些移动端的基础. touch事件.touchEvents对象.滑屏的思想与实现 移动端touch事件 touchstart touchmove touchend let box = document.querySelector("#box"); /* touchstart --> mousedown 手指触碰元素 touchmove --> mousemove 手指触碰元素之后,在屏幕中移动 touchend --> m

Android的Touch事件分发机制简单探析

前言 Android中关于触摸事件的分发传递是一个很值得研究的东西.曾不见你引入了一个ListView的滑动功能,ListView就不听你手指的指唤来滚动了:也不知道为啥Button设置了onClick和onTouch,其中谁会先响应:或许你会问onTouch和onTouchEvent有什么区别,又该如何使用?这里一切的一切,只要你了解了事件分发机制,你会发现,解释这都不是事儿! 相关Touch事件的方法 1.public boolean dispatchTouchEvent(MotionEve