移动端的touch事件
发布日期:2021-08-15 22:29:13 浏览次数:27 分类:技术文章

本文共 1024 字,大约阅读时间需要 3 分钟。

事件添加方式

//移动端的事件添加使用addEventListener//第一个参数是事件名称,第二个参数是触发事件之后的回调var div=document.querySelector("div");div.addEventListener("事件名称",function(e){  回调函数;})

主要触发事件

1 //touchstart 滑动开始 当手指触碰屏幕时候触发。 2 dom.addEventListener('touchstart',function(e){ 3      console.log("touchstart"); 4         console.log(e); 5 }); 6  7 //touchmove:滑动过程 当手指在屏幕上滑动时连续触发。是一个持续监听,持续触发的过程 8 dom.addEventListener('touchmove',function(e){ 9        console.log("touchstart");10         console.log(e);11 });12 13 //touchend:滑动结束 当手指离开屏幕时触发。14 dom.addEventListener('touchend',function(e){15        console.log("touchstart");16         console.log(e);17 });

 

返回对象具有的属性

事件返回的e对象包含移动端特有的属性:

   1.targetTouches 目标元素的所有当前触摸
   2.changedTouches 页面上最新更改的所有触摸
   3.touches 页面上的所有触摸

返回对象的坐标值

clientX:触摸目标在当前视口中的X坐标。clientY:触摸目标在当前视口中的Y坐标。

pageX:触摸目标在页面内容中的x坐标。pageY:触摸目标在页面内容中的y坐标。

screenX:触摸目标在屏幕中的x坐标。screenY:触摸目标在屏幕中的y坐标。

 

PageX和clientX

pageX指在页面上的位置,以页面左侧为参考点

clientX指可视区域内离左侧的距离,以滚动条滚动到的位置为参考点。

即当有滚动条时clientX  小于  pageX

 

转载于:https://www.cnblogs.com/ZHU-JOHNSON/p/6184691.html

转载地址:https://blog.csdn.net/weixin_30781107/article/details/97074971 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:stringstream快速实现String和int之间的转换
下一篇:Ant学习

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年04月09日 08时24分31秒