词条信息

admin
admin
超级管理员
词条创建者 发短消息   

相关词条

热门词条

更多>>
Excel常用函数的组合使用
Excel中的函数公式非常的强大,全部掌握很显然是不现实的,但是对常用的Excel函数公式,我们必须掌握。...
Python常见安全漏洞及修复方法
概述 编写安全的代码很困难,当你学习一门编程语言、一个模块或框架时,你会学习其使用方法。在考虑安全性时,你需...
微信自动抢红包是如何实现的?
前言 学习和了解逆向工程,可以帮助我们分析竞品和自己喜欢的APP的开发架构和某些功能的大体实现思路,也可以自...
Android动态权限总结
从Android6.0开始,Android系统提供动态申请权限的机制, APP在使用危险权限时,需要用户的...
深度解析阿里云FPGA平台“舜天”
  当你在天猫/手淘上买买买的时,图片会以不同格式或分辨率来转码呈现,这就要求后台系统需要强大的算力来保障...
解决网 >>所属分类 >> 程序开发    移动端开发   

移动端js触摸事件大全

标签: 移动端 js 触摸

顶[0] 发表评论(0) 编辑词条

目录

一、手机上的触摸事件编辑本段回目录

基本事件:

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  //判断是否支持触摸事件


二、示例编辑本段回目录

 

以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:

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);
};

 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-4465.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑百科, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇Linux chmod命令用法
下一篇javascript动画和css3动画的对比

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的百科词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>