zoukankan      html  css  js  c++  java
  • 移动端JS 触摸事件基础

    一、手机上的触摸事件

     
    基本事件:
     
    touchstart   //手指刚接触屏幕时触发
    touchmove    //手指在屏幕上移动时触发
    touchend     //手指从屏幕上移开时触发
     
    下面这个比较少用:
    touchcancel  //触摸过程被系统取消时触发
    每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯:
     
    touches         //位于屏幕上的所有手指的列表
    targetTouches   //位于该元素上的所有手指的列表
    changedTouches  //涉及当前事件的所有手指的列表
    每个事件有列表,每个列表还有以下属性:
     
    复制代码
    其中坐标常用pageX,pageY:
    pageX    //相对于页面的 X 坐标
    pageY    //相对于页面的 Y 坐标
    clientX  //相对于视区的 X 坐标
    clientY  //相对于视区的 Y 坐标
    screenX  //相对于屏幕的 X 坐标
    screenY  //相对于屏幕的 Y 坐标
     
    identifier // 当前触摸点的惟一编号
    target   //手指所触摸的 DOM 元素
    复制代码
    其他相关事件:
     
    event.preventDefault()   //阻止触摸时浏览器的缩放、滚动条滚动
    var supportTouch = "createTouch" in document  //判断是否支持触摸事件
    更多深入内容?点击:http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html
     
     
     
    二、示例
     
    以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:
     
    复制代码
    var touchFunc = function(obj,type,func) {
        //滑动范围在5x5内则做点击处理,s是开始,e是结束
        var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
        var sTime = 0, eTime = 0;
        type = type.toLowerCase();
     
        obj.addEventListener("touchstart",function(){
            sTime = new Date().getTime();
            init.sx = event.targetTouches[0].pageX;
            init.sy = event.targetTouches[0].pageY;
            init.ex = init.sx;
            init.ey = init.sy;
            if(type.indexOf("start") != -1) func();
        }, false);
     
        obj.addEventListener("touchmove",function() {
            event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
            init.ex = event.targetTouches[0].pageX;
            init.ey = event.targetTouches[0].pageY;
            if(type.indexOf("move")!=-1) func();
        }, false);
     
        obj.addEventListener("touchend",function() {
            var changeX = init.sx - init.ex;
            var changeY = init.sy - init.ey;
            if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
                //左右事件
                if(changeX > 0) {
                    if(type.indexOf("left")!=-1) func();
                }else{
                    if(type.indexOf("right")!=-1) func();
                }
            }
            else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
                //上下事件
                if(changeY > 0) {
                    if(type.indexOf("top")!=-1) func();
                }else{
                    if(type.indexOf("down")!=-1) func();
                }
            }
            else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
                eTime = new Date().getTime();
                //点击事件,此处根据时间差细分下
                if((eTime - sTime) > 300) {
                    if(type.indexOf("long")!=-1) func(); //长按
                }
                else {
                    if(type.indexOf("click")!=-1) func(); //当点击处理
                }
            }
            if(type.indexOf("end")!=-1) func();
        }, false);
    };
  • 相关阅读:
    python学习Day21--内置函数、反射
    python学习Day20--属性、类方法和静态方法+类多继承算法补充
    python学习Day19--面向对象的三大特性
    python学习Day18--继承
    python学习Day17--名称空间
    python学习Day16--面向对象
    python学习Day15--递归与二分查找
    python学习Day14--内置函数
    c# 深克隆与浅克隆
    css test-align 和 margin 居中什么区别
  • 原文地址:https://www.cnblogs.com/mopagunda/p/4543056.html
Copyright © 2011-2022 走看看