zepto-touch事件
<!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事件的更多相关文章
- zepto.js 处理Touch事件（实例）
处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...
- zepto.js 处理Touch事件
处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过ev ...
- zepto处理touch事件
处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- 手持设备点击响应速度，鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 提升手持设备点击速度之touch事件带来的坑！
前言 上周六,我将我们项目的click换成了tap事件,于是此事如梦魇一般折磨了我一星期!!! 经过我前仆后继的努力,不计代价的牺牲,不断的埋坑填坑,再埋坑的动作,最后悲伤的发现touch事件确实是个 ...
- mobile touch事件
touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
随机推荐
- 提交disable的Select值到后台
需求:界面上把select控件disable,然后将默认值传到后台 问题1:select disable: js中可以这样写: document.getElementById("provin ...
- 案例：原型 constructor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript_DOM详解
节点操作: 查看对象属性的值obj.getAttribute() 如: //获取图片 var imgs = document.getElementsByTagName("img") ...
- Thunar 右键菜单等自定义
Thunar 右键菜单等自定义 可以使用图形界面或者直接编辑配置文件,二者是等价的. 图形界面: 以给"zip,rar,7z"等文件添加"在此位置使用unar解压缩&qu ...
- redis配置篇
配置 Redis的配置信息在/etc/redis/redis.conf下. 查看 sudo vi /etc/redis/redis.conf 核心配置选项 绑定ip:如果需要远程访问,可将此⾏注释,或 ...
- Java中几种排序算法
1.冒泡排序算法 通过多次比较(相邻两个数)和交换来实现排序 public class bubble { public static void bubbleSort(int[] a) { int te ...
- 谷歌浏览器srcoll时,控制台一直报错
如果是使用betheme-child主题,在wp后台去掉这个srcoll插件 目录是wp后台的Betheme——Theme Options——Addons & Plugins——Addons— ...
- Django 自定义 admin
为 model 自定义显示 label是这个Field如果在form中的话会显示的.而verbose_name在form中不会显示.只是作为一种说明而已 callable() --> 是否 ...
- 栈+括号序列+暴力枚举——cf1248D1
这个复杂度首先就想到是n3的复杂度,n2枚举换的位置,求值在花费n复杂度 判断一个序列有多少独立的括号子串时用栈处理一下即可 /* 枚举交换两个括号的位置,然后再对新的序列判一次即可 */ #incl ...
- centos修改、保存文件的详细步骤
[一]修改文件 如果是使用普通用户登录的,需要先切换到管理员用户,打开终端,输入:su,接着按提示输入密码即可:然后使用命令进入需要修改文件的所在目录,常用的几个命令如下: ① cd + 目录名 ② ...