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

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. haslayout详解

    定义 haslayout是IE7-浏览器的特有属性.hasLayout是一种只读属性,有两种状态:true或false.当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素. [ ...

  2. Lua 学习笔记（三）表达式

    Lua中的表达式中可以包含数字常量.字面字符串.变量.一元和二元操作符及函数调用.表达式用于表示值.当然表达式中还可以包含函数定义以及table构造式.Lua中的操作符有:算术操作符.逻辑操作符.关系 ...

  3. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  4. 手把手教你调试Linux C++ 代码(一步到位包含静态库和动态库调试)

    手把手教你调试Linux C++ 代码 软件调试本身就是一项相对复杂的活动,他不仅要求调试者有着清晰的思路,而且对调试者本身的技能也有很高的要求.Windows下Visual Studio为我们做了很 ...

  5. Java之HashMap在多线程情况下导致死循环的问题

    PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象   当初学Java的时候只是知道HashMap<K,V& ...

  6. Javascript中的正则表达式

    Javascript中的正则表达式 刚开始接触正则表达式的时候,觉得这是个很死板的东西(没办法,计算机不能像人眼一样能很快的辨认出我们需要的结果,它需要一定的规则来对它进行限制),了解的越多,发现这个 ...

  7. 使用Spark分析拉勾网招聘信息(三): BMR 入门

    简述 本文,意在以最小的篇幅,来帮助对大数据和Spark感兴趣的小伙伴,能尽快搭建一个可用的Spark开发环境.力求言简意赅.文章,不敢自称BMR的最佳实践,但绝对可以帮助初学者,迅速入门,能够专心于 ...

  8. DedeCMS学习

    也许有些读者并不了解dedecms,这里简单介绍一下:DedeCMS是一个自由和开放源码的内容管理系统,它是一个可以独立使用的内容发布系统(CMS).织梦内容管理系统(DedeCms) 以简单.实用. ...

  9. 利用Travis CI 让你的github项目持续构建

    Travis CI 是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清新独树一帜.目前大多数的github项目都已经移入到Travis CI的构建队列 ...

  10. LINQ to SQL语句(1)之Where

    适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子句.Where操作包括3种形式,分别为简单形式.关系条件形式. ...