关于这三个移动端的事件，详细的资料网上一搜一大片，我就不浪费时间了

1.移动端长按事件

var timer = null;

$(ele).on('touchstart',function(){

    timer = setTimeout(function(){

        alert("我是长按事件！")

    },800);

});

$(ele).on('touchend',function(){

    clearTimeout(timer);

});

说明：通过定时器模拟长按事件，这个例子基于jQuery，【ele】是要长按的元素；

2.移动端上下左右滑动事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <title>touch</title>

</head>

<body>

<div id="touchLR">动起来</div>

<script>

// 左右滑动事件

var startX = 0, startY = 0;

function touchSatrtFunc(evt) {

    try

    {

        evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

        var touch = evt.touches[0]; //获取第一个触点

        var x = Number(touch.pageX); //页面触点X坐标

        var y = Number(touch.pageY); //页面触点Y坐标

        //记录触点初始位置

        startX = x;

        startY = y;

    }

    catch (e) {

        alert('touchSatrtFunc：' + e.message);

    }

}

function touchMoveFunc(evt) {

    try

    {

        evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

        var touch = evt.touches[0]; //获取第一个触点

        var x = Number(touch.pageX); //页面触点X坐标

        var y = Number(touch.pageY); //页面触点Y坐标

        var text;

        //判断滑动左右方向

        if (x - startX>=30) {

            text = '向右滑动';

            document.getElementById('touchLR').innerHTML = text;

        }else if(x - startX<=-30){

            text = '向左滑动';

            document.getElementById('touchLR').innerHTML = text;

        }

        //判断滑动上下方向

        if (y - startY>=30) {

            text = '向下滑动';

            document.getElementById('touchLR').innerHTML = text;

        }else if(y - startY<=-30){

            text = '向上滑动';

            document.getElementById('touchLR').innerHTML = text;

        }

    }

    catch (e) {

        alert('touchMoveFunc：' + e.message);

    }

}

function bindEvent() {

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

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

}

bindEvent();

</script>

</body>

</html>

说明：具体原理一搜一堆，这里的具体例子，拷贝就能用；我的学习方式是，不管什么原理之类的，先要做的就是把需求弄出来，在捉摸原理；事半功倍

移动端事件touchstart、touchmove、touchend的更多相关文章

  1. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  2. 获取touchstart,touchmove,touchend 坐标

    简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...

  3. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  4. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  5. 手机端touchstart,touchmove,touchend事件，优化用户划入某个可以点击LI的效果

    在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id) ...

  6. touchstart,touchmove,touchend事件 写法

    jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  7. JQuery 获取touchstart,touchmove,touchend 坐标

    JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  8. jQuery的touchstart,touchmove,touchend的获取位置

    $('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...

  9. JQuery获取touchstart,touchmove,touchend坐标

    $('#id').on('touchstart',function(e) { ].pageX; }); JQuery如上. document.getElementById("id" ...

随机推荐

  1. 使用supervisor提高nodejs调试效率

    如果你有PHP 开发经验,会习惯在修改PHP 脚本后直接刷新浏览器以观察结果,而你 在开发Node.js 实现的HTTP 应用时会发现,无论你修改了代码的哪一部份,都必须终止 Node.js 再重新运 ...

  2. poj1330Nearest Common Ancestors 1470 Closest Common Ancestors（LCA算法）

    LCA思想:http://www.cnblogs.com/hujunzheng/p/3945885.html 在求解最近公共祖先为问题上,用到的是Tarjan的思想,从根结点开始形成一棵深搜树,非常好 ...

  3. 后端码农谈前端（CSS篇）第五课：CSS样式

    一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...

  4. SQL*Loader之CASE6

    CASE6 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase6.sql set termout off rem host write sys$output &quo ...

  5. Docker的学习--介绍和安装

    什么是 Docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Lin ...

  6. VS2013正则表达式应用示例

    VS2013正则表达式语法 在查找替换对话框中查看 VS2013语法可在查找替换对话框中查看,具体过程如下: 通过编辑->查找和替换->在文件中替换或者相应快捷键(Ctrl+Shift+H ...

  7. 使用etcd+confd管理nginx配置

    1.前言 最近在项目中用nginx做反向代理,需要动态生成nginx的配置.大概流程是用户在页面上新增域名.http或https协议以及端口信息,后台会根据域名自动生成一个nginx的server配置 ...

  8. caffe中的props

    VS .props解析   在VS 2010项目文件夹中属性表文件的新的格式(.props).Visual Studio 2010引入了用户设置文件(Microsoft.cpp.<Platfor ...

  9. Trie树的应用：查询IP地址的ISP

    1. 问题描述 给定一个IP地址,如何查询其所属的ISP,如:中国移动(ChinaMobile),中国电信(ChinaTelecom),中国铁通(ChinaTietong)?现有ISP的IP地址区段可 ...

  10. 小技巧找出一个php的cron脚本出问题的代码行

    这个小技巧虽然很小,但是很有用. 我写了一个cron脚本,但是隔一天发现,这个昨天的cron脚本还一直在跑着,没有停下来,一定是里面有个程序堵住了. 但是如果我重新跑又需要很多时间.这个怎么办? 现在 ...