移动端触屏事件
移动端触屏事件
- touchstart:当手指放到屏幕上触发。
document.addEventListener('touchstart',function() { console.log('touchstart'); })
- touchmove:当手指在屏幕上滑动时,连续地触发。
document.addEventListener('touchmove',function() { console.log('touchmove'); })
- touchend:当手指从屏幕上离开时触发。
document.addEventListener('touchend',function() { console.log('touchend'); })
TouchEvent 触摸事件对象
触摸事件对象
-
touches:正在触屏的所有手指的列表(当前屏幕上的手指信息列表)
表示当前跟踪的触摸操作的touch对象的数组。
当一个手指在触屏上时,event.touches.length=1,
当两个手指在触屏上时,event.touches.length=2,以此类推。
-
targetTouches:正在被触摸的DOM元素上的手指列表(用的较多)(当前元素上的手指信息列表)
特定于事件目标的touch对象数组。
因为touch事件是会冒泡的,所以利用这个属性指出目标对象。
-
changedTouches:手指状态发生了改变的列表
表示自上次触摸以来发生了什么改变的touch对象的数组。
触摸事件对象属性
每个touch对象都包含下列几个属性:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
拖动元素案例
var box = document.querySelector('.box'); var oldX = 0; var oldY = 0; var x = 0; var y = 0; box.addEventListener('touchstart', function(e) { oldX = e.targetTouches[0].pageX; oldY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }) box.addEventListener('touchmove', function(e) { e.preventDefault(); // 阻止滚动屏幕 var moveX = e.targetTouches[0].pageX - oldX; var moveY = e.targetTouches[0].pageY - oldY; this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; })
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战