<!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. 为 STM32 移植 Berry 脚本语言

    Berry 是我为单片机设计的一款脚本语言,该语言具有资源占用小.平台无关.执行速度快和易于掌握等优点.在单片机上使用脚本语言可以提高单片机的二次开发能力以及调试效率,同时也是一种比较新颖的玩法.本教 ...

  2. jieba分词单例模式及linux权限不够情况下tmp_dir自定义

    在linux环境下,没有root权限的情况下,有时会碰到如下问题: Building prefix dict from the default dictionary ... Loading model ...

  3. mysql 判断指定条件数据存不存在，不存在则插入

    折腾了半天终于把这个给折腾顺了,但是后来发现用不了竟然...悲剧啊,但是还是要记录下加深记忆 insert into table1 (field1, field2,field3) select ?fi ...

  4. grpc协议--客户端构造

    由于服务端不在构造,已经构造完成不做构造 gRPC 接口名字为service,proto文件内有定义 1.本目录生成grpc文件 python -m grpc_tools.protoc -I. --p ...

  5. 【TJOI2018】教科书般的亵渎

    题面 题目描述 小豆喜欢玩游戏,现在他在玩一个游戏遇到这样的场面,每个怪的血量为\(a_i\),且每个怪物血量均不相同,小豆手里有无限张"亵渎".亵渎的效果是对所有的怪造成11点伤 ...

  6. java随笔记录

    JAVA的变量类型 类变量:独立于方法之外的变量,用 static 修饰. 实例变量:独立于方法之外的变量,不过没有 static 修饰. 局部变量:类的方法中的变量. public class Va ...

  7. java静态代理及动态代理(学习示例)

    1.接口 public interface Channel { void send(); } 2.实现类(可以为各种不同实现) public class ChannelImpl implements ...

  8. 利用SparkSQL(java版)将离线数据或实时流数据写入hive的用法及坑点

    1. 通常利用SparkSQL将离线或实时流数据的SparkRDD数据写入Hive,一般有两种方法.第一种是利用org.apache.spark.sql.types.StructType和org.ap ...

  9. STM32库中自定义的数据类型

    在头文件 <stdint.h> 中 1 /* exact-width signed integer types */ typedef signed char int8_t; typedef ...

  10. Java-Class-FC：java.time.Duration

    ylbtech-Java-Class-FC:java.time.Duration 1.返回顶部   2.返回顶部   3.返回顶部 1. /* * Copyright (c) 2012, 2015, ...