<!doctype html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <!--

             viewport 布局视口

             html的大小是布局视口大小

             真正可看见的大小是度量视口

             设备大小 布局视口 度量视口 ----- 保持一致

             width=device-width ----- 让布局视口的大小跟设备大小一致

             initial-scale=1 ------ initial-scale=布局视口/度量视口 =1   布局视口跟度量视口大小一致

             minimum-scale=1  maximum-scale=1  ----- 不能双击缩放

             user-scalable=no   -----   不能双指捏合

             虽然在标签已经将viewport设置为不能通过双击缩放，但是移动依然会接收这个事件

             移动端的处理接收这个事件的方式：

             在一次点击之后，等待300ms，如在这个时间之内，发生了第二次的点击，就是双击事件。

             //解决300ms延迟的问题，移动端提供了touch事件

             //移动端click事件，通常叫做tap事件

             zetpo提供了tap事件，   mui框架，vue框架，angular框架，react框架，都解决了tap事件。

         -->

         <style>

             #box{

                 width: 200px;

                 height: 200px;

                 background: red;

             }

         </style>

     </head>

     <body>

         <!--<div id="box" onclick="boxAction()"></div>-->

         <div id="box"></div>

         <script>

 //            function boxAction(){

 //                console.log(111111111)

 //            }

             var box = document.querySelector('#box');

             //添加事件监听

             //touch有四个部分

             //触摸开始

             box.addEventListener('touchstart', function(ev){

                 console.log('touchstart');

                 console.log(ev);

                 //ev.type: 事件名字

                 //ev.target: 触发对象

                 //ev.touches: 数组，触摸对象  一个的触摸点就是一个对象

                 //touch对象

                 //timeStamp 时间戳

                 //clientX

                 //clientY

                 //当touchend事件触发时，touches和targetTouches都没有值

                 //如果要知道停止的点在哪个位置，取changedTouches的值

                 //changedTouches 触摸的上一个点

                 //事件类型   事件touch对象时间戳   clientX clientY

                 //封装移动端的click事件 ，  通过都叫做tap事件

                 //    在touchStart时记录时间记录位置

                 //    如果手指移动了，触发了touchmove，并且滑动的范围大，就不能触发了click事件了

                 //    再在touchend判断时间，位置。才能触发click事件

                 //长按事件     滑动事件     捏合事件

             })

             //触摸移动，手指在该标签对象上开始触摸，之后再移动就会触发

             box.addEventListener('touchmove', function(ev){

                 console.log('touchmove');

                 console.log(ev)

             })

             //触摸开始之后，手指离开屏幕

             box.addEventListener('touchend', function(ev){

                 console.log('touchend');

                 console.log(ev)

             })

             //触摸是被动取消的，就会触发该事件

             //来电，来短信，来通知，锁屏，退出活跃状态。。。。

             box.addEventListener('touchcancel', function(){

                 console.log('touchcancel');

             })

         </script>

     </body>

 </html>

zepto-touch事件的更多相关文章

  1. zepto.js 处理Touch事件（实例）

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  2. zepto.js 处理Touch事件

    处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过ev ...

  3. zepto处理touch事件

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  4. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  5. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  6. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

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

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

  8. 提升手持设备点击速度之touch事件带来的坑！

    前言 上周六,我将我们项目的click换成了tap事件,于是此事如梦魇一般折磨了我一星期!!! 经过我前仆后继的努力,不计代价的牺牲,不断的埋坑填坑,再埋坑的动作,最后悲伤的发现touch事件确实是个 ...

  9. mobile touch事件

    touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...

  10. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

随机推荐

  1. Html5介绍及新增标签

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  2. svndumpfilter - 过滤一个 Subversion 仓库的转储文件 `dumpfile'。

    SYNOPSIS 总览 svndumpfilter command [options & args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版本的文件和目 ...

  3. 忘记mysql超户密码的解决方法

    本文章针对用yum安装的mariadb数据库,如果是tar包安装的mysql数据库,只是数据库命令的关闭启动方式不同而已. 方法一:[root@localhost ~]# killall -u mys ...

  4. docker build 时 alpine 无法安装软件问题的解决

    使用 alpine 作为 docker 基础镜像时,运行 apk add ..... 遇到如下错误: WARNING: Ignoring http://dl-cdn.alpinelinux.org/a ...

  5. bash命令根据历史记录补全

    用zsh比较方便的一个功能是在找之前用过的命令时可以先输入一部分命令作为过滤条件, 比如,想找 docker run 开头的历史命令,只需要键入 docker run 然后按 ↑ 进行选择. 但是在用 ...

  6. STL_map

    map<string,int> m; int main() { m[; cout<<m["]<<endl; ; }

  7. day08 python文件操作

    day08 python   一.文件操作     1.文件操作的函数         open(文件名, mode=模式, encoding=字符集)       2.模式: r, w, a, r+ ...

  8. Web安全之环境搭建

    一. 工具集:Linux: Kali最新版(A/P:root/toor).Windows7/10. 靶机:OWASP_BWA(A/P:root/owaspbwa).DVWA.Mutillidae.We ...

  9. v-for 循环 绑定对象 和数组

    <!--v-for 迭代数组--> <div id="app11"> <div v-for="info in infos"> ...

  10. How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 14.04

    How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 14.04 链接来自于:https://www.digitalo ...