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

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. How Do Annotations Work in Java?--转

    原文地址:https://dzone.com/articles/how-annotations-work-java Annotations have been a very important par ...

  2. SQL查询~ 存在一个表而不在另一个表中的数据

    A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ~执 ...

  3. Apache+MySQL+PHP开发环境的搭建（二）

    通过自主选择相应的apache,mysql,php等软件,根据自己的应用开发需求进行安装.此方法搭建的环境自主性较强,搭建过程较为复杂,繁琐. 1.所需软件: Apache: http-2.2.22- ...

  4. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  5. php的<?php ?>标签匹配

    在公司实习了没有多久就开始和同事发现了一个问题,就是之前的人写过的项目经常莫名其妙的出错,仔细的看项目的源代码的时候发现项目中并没有逻辑上的错误,而且各种关系以及数据都没有问题,这是为什么呢.再次认真 ...

  6. 如何解读SQL Server日志(2/3)

    接下来说说返回的RowLogo Content列,例子中返回了三个列.这些列包含了数据操作的"有效工作负载(Playload)"记录.根据不同操作类型有效负载的内容也是不同的,但是 ...

  7. oracle 表被锁了解决方案

    使用下面的语句来查询被锁定的表: SELECT /*+ rule */ lpad(' ',decode(l.xidusn ,0,3,0))||l.oracle_username User_name, ...

  8. vue之自定义指令directive

    <template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...

  9. 交换排序---快速排序算法（Javascript版）

    快速排序是对冒泡排序的一种改进.通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行 ...

  10. MVVM-Sidekick 之SendToEventRouterAction使用

    在WP开发中点击列表项跳转到详情页是一个很常用的功能,但是有可能项模板中还有其他的区域,比如点击标题跳转到详情页,点击"赞"图标送一个赞,点击"踩"图标踩一下, ...