<!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. php 时间转化为刚刚、几秒前、几分前、几天前等等，友好时间提示

    / * 友好时间显示 */ function date_friend_tips($time){ if (!$time) return false; if(!is_numeric($time)){ $t ...

  2. 深入理解zabbix（二）

    深入理解zabbix(二) 链接:https://pan.baidu.com/s/1q5YwJMTcZLcS5OQ0iOu44A 提取码:8gdi 复制这段内容后打开百度网盘手机App,操作更方便哦 ...

  3. ANdroid手机屏幕反横向等参数设定

    经过我一番百度和看Android文档,我才发现,Android对旋转屏,特别是只有横屏或者竖屏虽重力旋转的支持是到Android4.3.1才有完美支持的 unspecified - 默认值,由系统选择 ...

  4. Async Clipboard AP

    转自奇舞周刊,个人学习记录,侵权删 编者按:本文作者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团高级前端开发工程师,360前端技术委员会委员.W3C AC代表 如果 ...

  5. python自动化测试-使用第三方python库技术实现

    转载自https://www.cnblogs.com/beer/p/5418471.html

  6. 兼容ie8的多维数组——深拷贝

    浅拷贝只是把对象的内存位置指针给拷贝了,若修改拷贝对象,则原对象也会跟踪修改. var a = {a : 'old', b : { c : 'old'}} var b = Object.assign( ...

  7. Android_开发片段（Part 3）

    1.Android中的五种布局方式:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).网格视图(Grid View).标签布局( ...

  8. c go数据类型对应关系

    DataType C cgo sizeof--------------------+--------------------+------------------------------------- ...

  9. python爬虫 mac下安装使用Fiddler

    HTTP代理工具Fiddler Fiddler是一款强大Web调试工具,它能记录所有客户端和服务器的HTTP请求. Getting started 在安装之前需要准备Mono环境 If you don ...

  10. Linux知识总结（更新中）

    Linux知识总结(更新中) 如何查找特定的文件 find find path [options] params 作用:在指定目录下查找文件 检索文件内容 grep grep [options] pa ...