在处理移动端的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. The best way to predict the future is to invent it，预测未来最好的方法是创造它！

    The best way to predict the future is to invent it,预测未来最好的方法是创造它! ——Smalltalk发明人Alan Kay “预测未来的最好方法, ...

  2. hadoop System times on machines may be out of sync. Check system time and time zones.

    之前环境一直好好的,由于玩坏了一个mini3只能复制一个了,但是复制之后就出现这个问题了 解决办法是 设置xshell向每一个窗口发消息http://mofansheng.blog.51cto.com ...

  3. Linux驱动platform

    platform device<==> platform bus <==> platform driver 转自:platform设备驱动全透析 宋宝华 http://blog ...

  4. CentOS 6.9上安装mysql-5.6.37

    CentOS 6.9上安装mysql-5.6.37 1.准备数据存放的文件系统 新建一个逻辑卷,并将其挂载至特定目录即可.这里不再给出过程. 这里假设其逻辑卷的挂载目录为/data,而后需要创建/da ...

  5. Downloading jQuery

    Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used ...

  6. Python读取文件数据

    1题目要求: 文本文件有这些数据,需要的只有其中的5个属性,如下颜色标记 像以下的数据达到75万组: 1product/productId: B0000UIXZ4 2product/title: Ti ...

  7. iOS开发之提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploading this package

    iOS开发之提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploadin ...

  8. hdu4847:Wow! Such Doge!（字符串匹配）

    题目:hdu4847:Wow! Such Doge! 题目大意:在给出的段落里面找出"doge"出现的次数.大写和小写都能够. 解题思路:字符串匹配问题,能够在之前将字母都转换成统 ...

  9. 【BZOJ3309】DZY Loves Math 莫比乌斯反演+线性筛（好题）

    [BZOJ3309]DZY Loves Math Description 对于正整数n,定义f(n)为n所含质因子的最大幂指数.例如f(1960)=f(2^3 * 5^1 * 7^2)=3, f(10 ...

  10. can not find java.util.map java.lang.Double问题

    mybatis      @Param注解和ParamType属性不能共存