jQuery -- touch事件之滑动判断(左右上下方向)

$("body").on("touchstart", function(e) {
    // 判断默认行为是否可以被禁用
    if (e.cancelable) {
        // 判断默认行为是否已经被禁用
        if (!e.defaultPrevented) {
            e.preventDefault();
        }
    }
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchend", function(e) {
    // 判断默认行为是否可以被禁用
    if (e.cancelable) {
        // 判断默认行为是否已经被禁用
        if (!e.defaultPrevented) {
            e.preventDefault();
        }
    }
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;
    //左滑
    if ( X > 0 ) {
        alert(‘左滑‘);
    }
    //右滑
    else if ( X < 0 ) {
        alert(‘右滑‘);
    }
    //下滑
    else if ( Y > 0) {
        alert(‘下滑‘);
    }
    //上滑
    else if ( Y < 0 ) {
        alert(‘上滑‘);
    }
    //单击
    else{
        alert(‘单击‘);
    }
});

转载http://blog.csdn.net/sinat_19327991/article/details/73823767

时间: 2024-10-07 09:50:49

jQuery -- touch事件之滑动判断(左右上下方向)的相关文章

移动端笔记——jQuery touch事件

判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v

H5_0038:父元素有touch事件,子元素有点击事件,如何实现点击事件

移动端父元素绑定touch事件,子元素绑定click事件 一.问题描述 碰到一个非常头疼的问题,为了做一个滑动效果,给li标签绑定了touch事件.滑动之后,li标签的末尾会出现一个删除按钮,然后点击该删除按钮,删除整个li标签. 看起来没什么问题吧,实际上暗藏杀机啊.给删除按钮绑定点击事件的时候,并没有执行点击事件,而是先执行了父元素,也就是li标签的touch事件. 那怎么解决呢? 最开始想到的是,click事件应该设置成冒泡阶段执行,在设置个阻止冒泡,这样不就不会触发父元素的touch事件

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

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

实现移动端touch事件的横向滑动列表效果

要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)-->touchmove(手指移动多少,元素相应移动多少). 接下来讲讲实现逻辑: 其实就是手指拖动列表向哪个方向移动多少像素,并设置左右拖动的边界值. 附上代码及注释: <div id="common_wrap" class="common-wrap"> <h4 class="common-kit__

touch事件调研-四个方向的滑动效果demo示例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移动端触摸滑动</title> <meta name="viewport" content="target-densitydpi=320,width=

android中根据touch事件判断单击及双击

private static final int MAX_INTERVAL_FOR_CLICK = 250;     private static final int MAX_DISTANCE_FOR_CLICK = 100;     private static final int MAX_DOUBLE_CLICK_INTERVAL = 500;     int mDownX = 0;     int mDownY = 0;     int mTempX = 0;     int mTempY

移动端touch触屏滑动事件、滑动触屏事件监听!

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小

(一)html5 touch事件实现页面上下滑动

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo. 下午好生研究了下终于搞出了个比较全面的上下滑动的小demo,代码比较简单. 下面是完整代码,我把几个重要的地方做了红色标记 <!doctype html> <html lang="en"> <head> <

Touch事件及触屏滑动距离计算

移动端涉及图片轮播或者一些交互性的游戏时都会用到,毕竟移动端交互大多都靠手指. 移动端有四个关于触摸的事件,分别是touchstart.touchmove.touchend.touchcancel(比较少用), 它们的触发顺序是touchstart-->touchmove-->touchend-->click,所以touch事件触发完成后会接着触发click事件,需要注意一下 ,阻止一下事件冒泡就可以了. touch事件可以产生一个event对象,这个event对象除基本的一些属性外还附