基本概念

1、在移动web端点击事件或者滑动屏幕、捏合等动作都是由touchstar、touchmove、touchend这三个事件组合在一起使用的

2、click事件在移动端会有0.2秒的延迟，下面是测试click在移动web端的延迟，最好在手机浏览器中测试

<script>

    window.onload = function () {

        var currentTime = 0;

        document.body.addEventListener('click', function (ev) {

            console.log(Date.now() - currentTime);

        })

        document.body.addEventListener('touchstart', function (ev) {

            currentTime = Date.now();

        });

    }

</script>

3、touchstar、touchmove、touchend这三个事件我们关注的是里面的touches属性，这是一个数组，里面有鼠标clientX与clinetY属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Title</title>

    <style>

        html, body {

            height: 100%;

            background-color: pink;

        }

    </style>

</head>

<body>

<script>

    window.onload = function () {

        document.body.addEventListener('touchstart', function (ev) {

            console.log(ev);

        });

        document.body.addEventListener('touchmove', function (ev) {

            console.log(ev);

        });

        document.body.addEventListener('touchend', function (ev) {

            console.log(ev);

        })

    }

</script>

</body>

</html>

touchstart：touches中有长度为1的数组，touches[0]中clientX，clientY是有值的

touchmove：touches中有长度为1的数组，touches[0]中clientX，clientY是有值的，而且不断在变化

touchend：touches中有长度为0的数组，因为我们只是一个鼠标在点击，鼠标弹起的时候touches是不会存储值的

点击事件

既然click有延迟，那么我们就用touch的三个事件来代替click事件，只要满足下面几种情况，我们就能够说明这次动作是点击事件，而不是长按屏幕或者滑动屏幕

1、touchstart与touchend触发的事件大于250就证明这不是点击事件

2、touchmove事件在这次动作中被触发就证明这不是点击事件

3、下面是封装的一个toush事件模仿点击事件，需要注意的是回调函数的参数，它的实参是在函数中被传入的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Title</title>

    <style>

        html, body {

            height: 100%;

            background-color: pink;

        }

    </style>

</head>

<body>

<script>

    var ele = document.querySelector('body');

    fox_tap(ele, function (e) {

        console.log('点击');

        console.log(e);

    });

    /*

        element：绑定的dom元素

        callback：回调函数

    */

    function fox_tap(element, callback) {

        var statTime = 0;

        var isMove = false;

        var maxTime = 250;

        var event = null;

        element.addEventListener('touchstart', function (e) {

            statTime = Date.now();

            /*

                每次执行注册事件都要初始化此值，因为touchmove事件触发的时候会更改isMove的值，不更改，

                下次再进入touchtend事件会沿用上次touchmove修改过的isMove的值，这样就一直终端函数

            */

            isMove = false;

            event = e;

        });

        element.addEventListener('touchmove', function (e) {

            isMove = true;

        });

        element.addEventListener('touchend', function (e) {

            if (isMove == true) {

                return;

            }

            if ((Date.now() - statTime) > maxTime) {

                return;

            }

            callback(event);

        });

    }

</script>

</body>

</html>

移动web——touch事件介绍的更多相关文章

  1. javascript——touch事件介绍与实例演示

      分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...

  2. 移动web touch事件

    参考:http://www.cnblogs.com/dojo-lzz/p/5452575.html wap中的原生touch 事件,touchstart.touchmove.touchend.touc ...

  3. 移动web——touch事件应用

    基本概况 1.touch事件在移动端被用来代替click事件,因为click事件的触发会延迟影响了用户体验 2.touch事件还可以与translate构成吸附效果 3.现行有一种排版方式是左边宽度是 ...

  4. 从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. HTML5触摸屏touch事件使用介绍1

    市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可 ...

  6. 移动web开发之touch事件

    前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着An ...

  7. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

  8. 移动端Web界面滚动touch事件

    解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...

  9. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

随机推荐

  1. linux下安装并配置vim

    1.安装:sudo apt-get install vim-gtk  安装好后vim,并按“tab”键,可以看到vim的存在,则安装好2.设置更加人性化:sudo vim /etc/vim/vimrc ...

  2. [bzoj5301][Cqoi2018]异或序列_莫队

    异或序列 bzoj-5301 Cqoi-2018 题目大意:题目链接. 注释:略. 想法: 由于a^a=0这个性质,我们将所有的数变成异或前缀和. 所求就变成了求所有的$l_i\le x<y\l ...

  3. docker mysql 主从配置

    docker安装运行单实例的MySQL参考另一篇文档 http://www.cnblogs.com/manger/p/7611309.html 1.首先在/data/script下创建两个文件my-m ...

  4. Ubuntu 16.04安装WPS

    1.下载 http://community.wps.cn/download/ 根据需要对应版本进行下载deb包. 2.安装 sudo dpkg -i wps-office_10.1.0.5672~a2 ...

  5. Filter过滤器机制

    tomcat内部过滤器采用了责任链的设计模式, Tomcat的过滤器主要由Filter.FilterChain组成,FilterChain包含一个Filter数组.当Wrapper执行FilterCh ...

  6. 从内核源代码配置文件预測泛泰新品（A920 ？）

    泛泰的IRON2 A910刚公布不久, 但近期在最新的泛泰890的内核源代码的config文件中又看到了这种编号,例如以下图: 图上ef63s 明显是A910S. 但这ef65s 又是什么呢, 看到这 ...

  7. Cocos2d坐标系具体解释

    1.笛卡尔坐标系 左手坐标系(Direct3D坐标系),右手坐标系(Direct3D坐标系) 大拇指和食指分别相应x轴和y轴 2.UI坐标系 iOS/Android/Windows SDK中的通用UI ...

  8. MVC模式利用xib文件定制collectionCell

    数据来源于豆瓣网~仅供学习交流~ 本实例练习用到了SDWebImage框架:实现从网络端下载图片的功能 下载地址:https://github.com/rs/SDWebImage 实现效果及框架: x ...

  9. 联想S820 MIUI刷机包 MIUI 4.4.30 流畅执行 在线主题破解

    ROM介绍 破解免费使用MIUI全部主题(方法:开机开启Root权限,进入WSM工具箱→安装二进制文件→重新启动→再次进入WSM工具箱→两个工具打上勾→重新启动),然后尽情奔放吧 .加入V4A音效 . ...

  10. 数学之路-python计算实战(1)-ubuntu安装pypy

    Get the source code. The following packages contain the source at the same revision as the above bin ...