在处理移动端的touch事件时，我们可以选择一些插件来处理，比如jquery ui touch punch.js 提供丰富的触摸效果，可以满足移动端的开发，

但是，有些移动端开发中，并不需要如此复杂的效果，例如我们只需知道滑动的距离，向左还是向右，我们可以自己写一些代码来处理touch事件；

以下代码，只在触摸情况下支持，电脑需要chrome模拟手机；

可以改造成自己需要的效果：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>touches</title>

<style>

body{ font-size:16px; color:red;}

#div1{width:100%;height:200px;background:#ccc;font-size:2em;}

</style>

<script>

var xc,yc,x1,x2,y1,y2;

function touches(ev){

    if(ev.touches.length==1){ 

        var oDiv=document.getElementById('div1'); 

        switch(ev.type){

            case 'touchstart':

               //oDiv.innerHTML='Touch start('+ev.touches[0].clientX+', '+ev.touches[0].clientY+')';

                ev.preventDefault();  //阻止出现滚动条 

                x1 = Math.floor(ev.touches[0].clientX);

                y1 = Math.floor(ev.touches[0].clientY);

                break;

            case 'touchend':

                //oDiv.innerHTML='Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')';

                break; 

            case 'touchmove':

                //oDiv.innerHTML='Touch move('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')'; 

                x2 = Math.floor(ev.changedTouches[0].clientX);

                y2 = Math.floor(ev.changedTouches[0].clientY);

                xc = x2-x1;

                yc = y2-y1;

                oDiv.innerHTML='x移动了：'+xc+';y移动了'+yc;

                break;

        } 

    }

}

document.addEventListener('touchstart',touches,false);

document.addEventListener('touchend',touches,false);

document.addEventListener('touchmove',touches,false);

</script> 

</head>

<body>

<div id="div1"></div>

<p>需要电脑模拟手机（chrome）</p>

</body>

</html>

另外，网上找了一些其他关于处理touch的事件教程：链接如下移动端touch事件

js 处理移动端触摸事件的更多相关文章

  1. HTML5移动端触摸事件

    一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...

  2. js获取移动端触摸坐标

    想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches也只获得到了鼠标按下时的坐标, ...

  3. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  4. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  5. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]

    转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onm ...

  6. H5移动端触摸事件：touchstart、touchend、touchmove

    第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1 ...

  7. 移动端触摸（touch）事件

    移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文 ...

  8. 关于js-binding中Layer触摸事件的优化

    关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...

  9. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

随机推荐

  1. centos7设置ip

    centos7不能再通过setup命令来设置ip了,但可以通过修改网卡配置文件来设置ip 在/etc/sysconfig/network-scripts目录下找到网卡配置文件,修改之前内容如下 TYP ...

  2. Dijkstra 算法——计算有权最短路径（边有权值）

    [0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在理解 Dijkstra 的思想并用源代码加以实现: 0.2)最短路径算法的基础知识,参见 http://blog. ...

  3. github 答题

    头脑王者 / 百万英雄 / 冲顶大会 / 芝士超人 自动答题:https://github.com/cxs1994/python_answer 头脑王者:https://github.com/sear ...

  4. 走进EC6的let和const命令

    详细学习链接: http://es6.ruanyifeng.com/#docs/let let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命 ...

  5. VS2019取消git源代码管理

    VS2019->工具->选项->源代码管理->插件管理 详见下图

  6. WCF基础之序列化

    wcf是基于消息进行通信的,这篇就是简单说下序列化引擎是如何将.net object转化为xml消息.一般情况下很少用到这些,你只需定义数据协定之类的或者指定相应的序列化引擎,然后设置相应的特性就好. ...

  7. Ubuntu中安装FTP 服务器自己踩得坑

    12点多了,擦!做个码农真不容易呀! 系统:Ubuntu16.04 安装:FTP 步骤: 1.不管有没有一上来我先卸载: sudo apt-get purge vsftpd 2.再安装:sudo ap ...

  8. ibatis实现Iterate的使用 (转)

    <iterate         property="" /*可选,              从传入的参数集合中使用属性名去获取值,              这个必须是一 ...

  9. python+NLTK 自然语言学习处理七：N-gram标注

    在上一章中介绍了用pos_tag进行词性标注.这一章将要介绍专门的标注器. 首先来看一元标注器,一元标注器利用一种简单的统计算法,对每个标识符分配最有可能的标记,建立一元标注器的技术称为训练. fro ...

  10. Cordova+FrameWork7开发简单教程

    1: 环境要有:(一个不会搭建环境的程序员,要么学,要么退出编程 ) 环境这里我只说需要什么: 1>AndroidStudio 3.0 (2.几的版本总会出问题.我喜欢用新版本) 2>co ...