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

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. 自动生成Mapper和Entity工具MybatisGenerator的使用

    新建一个XML文件crmGeneratorConfig.xml,文件具体内容如下.把MybatisGenerator.zip解压出来,把MybatisGenerator文件夹复制到Eclipse安装目 ...

  2. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  3. maven -- 学习笔记（三）之搭建nexus私服

    下载和安装nexus (1)官网链接http://www.sonatype.org/nexus/archived/ (直接点击下载链接,发现下载不了,FQ+迅雷就可以下载) (2)解压到指定文件夹,然 ...

  4. backbone库学习-Router

    backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来自http://blog.csdn.n ...

  5. JavaScript作用域原理（二）——预编译

    JavaScript是一种脚本语言, 它的执行过程, 是一种翻译执行的过程.并且JavaScript是有预编译过程的,在执行每一段脚本代码之前, 都会首先处理var关键字和function定义式(函数 ...

  6. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  7. java并发编程读书笔记（1）-- 对象的共享

    1. 一些原则 RIM(Remote Method Invocation):远程方法调用 Race Condition:竞态条件 Servlet要满足多个线程的调用,必须是线程安全的 远程对象,即通过 ...

  8. js基础篇——localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题.localStorage有以下几个特点 1.localStorage是一个普通 ...

  9. 理解TCP/IP三次握手与四次挥手的正确姿势

    背景 注:以下情节纯属虚构,我并没有女朋友==. 和女朋友异地恋一年多,为了保持感情我提议每天晚上视频聊天一次. 从好上开始,到现在,一年多也算坚持下来了. 问题 有时候聊天的过程中,我的网络或者她的 ...

  10. 矩阵乘法 --- hdu 4920 ： Matrix multiplication

    Matrix multiplication Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/ ...