本文介绍了移动端的原生touch事件，包括touchstart、touchmove、touchend和touchcancel，详细解析了touch对象的属性如clientX/Y、pageX/Y、screenX/Y和identifier。此外，还探讨了Zepto库在移动端的事件封装，如tap、singleTap、doubleTap等，以及如何解决移动端300ms点击延迟和tap穿透问题，推荐使用fastclick.js。
移动端事件
1. 原生移动端touch事件
- 1.1. 手指放到屏幕上的时候触发 touchstart 开始触摸
<body>
<div id="mm">看这里~~~</div>
<script>
var mm = document.getElementById("mm");
mm.ontouchstart = function(){
mm.innerHTML = "手指放到屏幕上，开始触摸"
}
</script>
</body>
- 1.2.手指在屏幕上移动的时候触发 touchmove 触摸并移动
mm.ontouchmove = function(){
mm.innerHTML = "触摸并移动"
}
- 1.3. 手指从屏幕上拿起的时候触发 touchend 触摸结束
mm.ontouchend = function(){
mm.innerHTML = "触摸结束"
}
- 1.4. 系统取消touch事件的时候触发。touchcancel 触摸被取消
假如正在滑动时，来电话了，会触发这个事件
2.原生移动端touch属性
touches:是指当前屏幕上所有的手指对象（是一个数组）
targetTouches:当前元素上的手指对象
change
最低0.47元/天 解锁文章
扫一扫
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
