zepto-touch事件
<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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章