移动端触屏事件

2022-05-21 08:00:55 阅读：175 来源： 互联网

标签：手指触摸端触 touch 事件 var 屏幕移动 targetTouches

移动端触屏事件

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';
})

标签：手指,触摸,端触,touch,事件,var,屏幕,移动,targetTouches
来源： https://www.cnblogs.com/yyshow/p/16294345.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动端触屏事件