h5触摸事件-判断上下滑动

        // 判断上下滑动
        var startX = 0,
        startY = 0;
    function touchStart(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;
        }catch(e){
            console.log(e.message)
        }
    }

    function touchMove(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //判断滑动方向
            if (y - startY<0) {
                console.log(‘上滑了!‘);
                var mainView = myApp.addView(‘.view-main‘, {domCache: true});
                mainView.router.load({pageName: ‘friendCircle‘});
            }
        }catch(e){
            console.log(e.message);
        }
    }

    // function touchEnd(evt){
    //     try{
    //         var touch = evt.touches[0], //获取第一个触点
    //                 x = Number(touch.pageX), //页面触点X坐标
    //                 y = Number(touch.pageY); //页面触点Y坐标
    //         //判断滑动方向
    //         if (y - startY<0) {
    //             console.log(‘上滑了!‘);
    //         }
    //     }catch(e){
    //         console.log(e.message);
    //         console.log("end");
    //     }
    // }

    //绑定事件
    function bindEvent(){
        document.addEventListener(‘touchstart‘,touchStart,false);
        document.addEventListener(‘touchmove‘,touchMove,false);
        // document.addEventListener(‘touchend‘,touchEnd,false);
    }

    bindEvent();

参考:http://blog.csdn.net/bbsyi/article/details/52108599

时间: 2024-10-09 13:48:34

h5触摸事件-判断上下滑动的相关文章

《移动端浏览器Touch事件判断手指滑动方向方法》

1 $("body").on("touchstart", function(e) { 2     e.preventDefault(); 3     startX = e.originalEvent.changedTouches[0].pageX, 4     startY = e.originalEvent.changedTouches[0].pageY; 5 }); 6 $("body").on("touchmove",

Android触摸事件

简介: 做了一个语音发送UI的小demo. 按下显示语音窗口,根据音量调节UI音量显示,上划至窗口显示取消发送. 原理: 1:获取什么事件来执行操作: 给Button添加setOnTouchListener事件,获得触摸事件,在滑动事件中得到当前显示控件的坐标,然后根据当前触摸位置与坐标进行判断来确定是否取消.在触摸离开的事件中来确定是否处理发送的请求. 2:更新音量值: 在线程中得到录音的音量大小,然后用handler发送到activity中进行UI更新. 详解事件: 通过public boo

屏幕触摸事件监听,判断上下左右的操作行为,判断方法缩小的操作行为

在手机屏幕上能够实现的人机交互行为,大致包括点击按钮,拉动滑动块,物体缩放,上下左右拉动等. 手机屏幕触摸事件的监听方法: 1.首先要设置一块布局区域,frameLayout/LinearLayout等都可以,并为布局设置id: 2.在Activity中声明相应的布局类型,并通过findViewById()方法找到该布局,然后为该布局区域设置setOnTouchListener()方法,就能监听在相应屏幕触摸操作 实现屏幕触摸事件监听的代码: private LinearLayout Land;

从ScrollView嵌套EditText的滑动事件冲突分析触摸事件的分发机制以及TextView的简要实现和冲突的解决办法

本篇文章假设读者没有任何的触摸事件基础知识,所以我们会从最基本的触摸事件分发处说起. ScrollView为什么会出现嵌套EditText出现滑动事件冲突呢?相信你会有这种疑问,我们来看这么一种情况: 有一个固定高度的EditText,假设它只能显示3行文本,但是,我们在其中输入的文本多余三行时,那么这时就需要可以在EditText内部进行小幅滚动了.那么将这个EditText放入了ScrollView当中, 并且ScrollView内容过多以致ScrollView也可以滑动,这时候就会出现Ed

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

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

H5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

iOS中的四中触摸事件的详解 - 平移- 捏合 - 滑动(TouchesBegan,touchesMoved,touchesEnded,touchesCancelled)

RootViewController #import "RootViewController.h" #import "TouchView.h" #import "PanView.h" #import "PinchView.h" @interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad { [super

Android 手势&amp;触摸事件

在刚开始学Android的时候,就觉得Google的文档不咋样,在研究手势时,更加的感觉Google的文档写得实在是太差了.很多常量,属性和方法,居然连个描述都没有.没有描述也就罢了,但是OnGestureListener里手势这么多,它也没有一个介绍说明,在没有进行不断才尝试之前,谁能搞懂onLongPress和onShowPress,onScroll和onFling的关系与差别吗?Google真的需要在文档方面做一次大手术了.不过好在经过鄙人不断反复的尝试.从个人的角度为这几个手势动作做出了

深入了解触摸事件的分发

1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOWN.ACTION_MOVE.ACTION_UP.当用户手指接触屏幕时,便产生一个动作为ACTION_DOWN的触摸事件,此时若用户的手指立即离开屏幕,会产生一个动作为ACTION_UP的触摸事件:若用户手指接触屏幕后继续滑动,当滑动距离超过了系统中预定义的距离常数,则产生一个动作为ACTION_MOVE的触摸事件,系统中预定义的用来判断用户手指在屏幕上的滑动是否是一个ACTION_MOVE动作的这个距离常量叫