移动端触屏事件
程序员文章站
2022-11-21 19:34:54
移动端触屏事件
解释touch事件:是移动端的触摸事件,而且是一组事件
1.touchstart:当手指触摸屏幕的时候触发
2.touchmove:当手指在屏幕来回滑动的时候触发
3.touchen...
移动端触屏事件
解释touch事件:是移动端的触摸事件,而且是一组事件
1.touchstart:当手指触摸屏幕的时候触发
2.touchmove:当手指在屏幕来回滑动的时候触发
3.touchend:当手指离开屏幕的时候触发
4.touchcancel:当*终止滑动的时候触发(来电 弹消息}
使用touch事件 1.box.addeventlistener( “touchstart ”,function(){}) 2.触摸事件的事件对象 changtouches 改变后触摸点的集合 --每个时间都会记录 targettouches 当前元素的触摸点的集合 --当离开屏幕的时候就无法记录 touches 页面上所有的触摸点的集合 --当离开屏幕的时候就无法记录 属性值都是touchlist--触摸点的集合 分析滑动实现的原理 1.让触摸的元素随着滑动位置的改变 2.需要改变,则需要获得当前触摸的坐标 e.touches【0】.clientx clientx clienty 基于浏览器窗口的坐标 pagex pagey 基于页面 screenx screeny 基于屏幕<script> var box = document.queryselector('.box'); box.addeventlistener('touchstart',function(e){ console.log('start'); console.log(e.touches[0].clientx); }); box.addeventlistener('touchmove',function(e){ console.log('move'); console.log(e.touches[0].clientx); }) box.addeventlistener('touchend',function(e){ console.log('end'); console.log(e); }) </script>