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

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. nyoj 925 国王的烦恼（最小生成树）

    /* 题意:N个城市中每两个城市有多条路径连接,可是因为路径存在的天数是有限的!以为某条路经不存在了 导致N个城市不能连通了,那么村名们就会抗议!问一共会有多少次抗议! 思路:最小生成树....我们用 ...

  2. 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  3. 基于Metronic的Bootstrap开发框架经验总结（7）--数据的导入、导出及附件的查看处理

    在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...

  4. Datatables 在asp.net mvc中的使用

    前言 最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...

  5. 机器学习&数据挖掘笔记_21（PGM练习五：图模型的近似推理）

    前言: 这次练习完成的是图模型的近似推理,参考的内容是coursera课程:Probabilistic Graphical Models . 上次实验PGM练习四:图模型的精确推理 中介绍的是图模型的 ...

  6. 谈谈Java程序员进阶的那些知识和方向

    谈谈Java程序员进阶的那些知识和方向 记得前段时间看过一篇文章谈到一种程序员叫野生程序员,战斗力极强,可以搞定一切问题,但是通常看问题抓不到本质,或者说是google/baidu/stackover ...

  7. js基础篇——原型与原型链的详细理解

    js中的对象分为两种:普通对象object和函数对象function. function fn1(){}; var fn2 = function(){}; var fn3 = new Function ...

  8. 定义通用的可通过lambda表达式树来获取属性信息

    我们一般获取某个类型或对象的属性信息均采用以下几种方法: 一.通过类型来获取属性信息 var p= typeof(People).GetProperty("Age");//获取指定 ...

  9. 优化MySchool数据库总结

  10. python注释

    初学python 习得注释方法 如下: #我是注释 print("hello") ''' 我是 多行 注释! ''' 其实就是#号和三个单引号(也可以双引号)啦 看下面:这注释其实 ...