一、手机上的触摸事件

 
基本事件:
 
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);
};

移动端JS 触摸事件基础的更多相关文章

  1. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  2. 移动端js触摸事件大全

    一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这 ...

  3. js 触摸事件

    js触摸事件 应用在移动端 webkit内核都支持. 触摸事件api https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html 事件 ...

  4. 移动端touch触摸事件(滑动效果和手势操作)

    一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...

  5. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  6. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

  7. js触摸事件

    touch事件的绑定 电脑端的mouseDown,mouseUp,mouseMove分别对应移动端的touchstart,touchend,touchmove 下面的代码判断浏览器是电脑端还是移动端, ...

  8. 移动端js触摸touch详解(附带案例源码)

    移动端触摸滑动原理详解案例,实现过程通过添加DOM标签的触摸事件监听,并计算触摸距离,通过距离坐标计算触摸角度,最后通过触摸角度去判断往哪个方向触摸的. 触摸的事件列表 触摸的4个事件: touchs ...

  9. JS 的事件基础、事件侦听与抛发、

    前言 JavaScript是一种事件驱动型语言.事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行,而是会在合适的时间才去执行.这个合适的时间是指当某个事件发生之后(例如一个输入框的 ...

随机推荐

  1. MySQL的分页

    有朋友问: MySQL的分页似乎一直是个问题,有什么优化方法吗?网上看到网上推荐了一些分页方法,但似乎不太可行,你能点评一下吗? 方法1: 直接使用数据库提供的SQL语句 ---语句样式: MySQL ...

  2. yum 配置

    1.配置yum本地源 # mount /dev/cdrom /mnt/ # vim /etc/yum.repos.d/rhel-source.repo 1 [rhel-source] 2 name=R ...

  3. SharePoint Word 转换PDF服务介绍及示例

    前言:在SharePoint使用过程中,经常会发现将文档进行格式转换的需求,之前,看到SharePoint 2013有将PPT转换PDF文档的服务,后来,才发现SharePoint 2010开始,就有 ...

  4. 跨域请求获取Solr json检索结果并高亮显示

    Solr提供了json格式的检索结果,然而在跨域的情况下如何调用呢?我们可以利用jquery提供的jsonp的方式获取Solr检索结果. <script type="text/java ...

  5. 【动态规划】The Triangle

    问题 E: [动态规划]The Triangle 时间限制: 1 Sec  内存限制: 128 MB提交: 24  解决: 24[提交][状态][讨论版] 题目描述 73 88 1 02 7 4 44 ...

  6. 毫秒数转换为指定格式日期的js代码

    var format = function(time, format){ var t = new Date(time); var tf = function(i){return (i < 10 ...

  7. springMVC controller间跳转、重定向、传参

    转载自:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/   1. 需求背景     需求:spring MVC框架co ...

  8. ORACLE查询当前资产状态,和另一个数据库联查,(查询重复数据中第一条),子查询作为字段查询

    背景:ORACLE查询当前资产状态,包含资产信息(表1),资产维修状态(表2),资产报废状态(表3) 如下: 资产信息:

  9. [SVN(Ubuntu)] SVN 查看历史详细信息

    转载: http://lee2013.iteye.com/blog/1074457 以下内容,对ubuntu命令行查看代码变化非常有用. SVN 查看历史信息 通过svn命令可以根据时间或修订号去除过 ...

  10. VS2013+opencv2.4.9(10)配置

    1. 下载opencv2.4.9,然后解压到一个位置 设置opencv SDK解压目录,点击Extract后解压   我是习惯于解压到这个位置的.   解压过程如上图.  2. 文件目录介绍  解压后 ...