<!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. Java中date和calendar的用法

    获取现在系统的时间和日期看起来是一件非常神奇的事情,但是当使用date和calendar之后发现仍然非常神奇. 1.date 使用date日期之前需要导入包: import java.text.Sim ...

  2. 【记录】VScode快捷键大全

    记住快捷键能够提高工作效率 Ctrl+Shift+P,F1 展示全局命令面板 Ctrl+P 快速打开最近打开的文件 Ctrl+Shift+N 打开新的编辑器窗口 Ctrl+Shift+W 关闭编辑器 ...

  3. Codeforces 351C Jeff and Brackets 矩阵优化DP

    题意:你要在纸上画一个长度为n * m的括号序列,第i个位置画左括号的花费是a[i % n], 画右括号的花费是b[i % n],问画完这个括号序列的最小花费.n <= 20, m <= ...

  4. 神奇的Android Studio Template（转）

    转自:http://blog.csdn.net/lmj623565791/article/details/51592043 本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台 ...

  5. rabbitmq使用延迟时报异常

    声明交换机为延迟时报异常( unknown exchange type 'x-delayed-message')的解决方法 服务端需下载安装插件: 1.下载插件包 2.将下载后的插件包移至服务安装目录 ...

  6. ToDoList 增删改查

    ToDoList 主要功能 增加数据 删除数据 修改数据 查寻数据渲染页面 1 . HTML页面 <!DOCTYPE html> <html lang="en"& ...

  7. luoguP3806 【模板】点分治1 [点分治]

    题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接 ...

  8. 杂项-WebService：WebService

    ylbtech-杂项-WebService:WebService Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个 ...

  9. python re.findall 使用

    python re.findall 使用 import re #\w 匹配字母数字及下划线 print(re.findall('\w','hello alan _god !@^&#^$^!*& ...

  10. （转） C#中使用throw和throw ex抛出异常的区别

    通常,我们使用try/catch/finally语句块来捕获异常,就像在这里说的.在抛出异常的时候,使用throw和throw ex有什么区别呢? 假设,按如下的方式调用几个方法: →在Main方法中 ...