JavaScript移动端Touch触摸事件详解与对象属性分析

事件对象与获取方式

事件对象用于记录事件发生时的相关信息。该对象仅在事件触发时生成，且只能在对应的事件处理函数内部访问，一旦所有事件处理函数执行完毕，事件对象即被销毁。

• 在W3C DOM标准中，事件对象作为事件处理函数的第一个参数传入。
• 而在IE浏览器中，事件对象被作为window对象的一个属性（类似于全局变量）存在。

jQuery事件对象与originalEvent

关于originalEvent对象

在实际开发中，当使用on()函数并传入第二个选择器参数时，访问e.touches[0]可能会返回undefined。通过打印e发现，此时的对象并非原生事件对象，而是jQuery封装的事件对象。

$(window).on("touchstart","body",function(e){
  console.log(e)
})

在上述示例中，event对象包含一个originalEvent属性，这才是真正的原生touch事件。jQuery.Event是一个构造函数，它创建了一个可读写的jQuery事件对象，并在该对象中保留了对原生事件对象event的引用（即$event.originalEvent）。我们绑定的事件处理程序所处理的事件对象实际上都是$event。此外，该方法还可以传递一个自定义事件的类型名，用于生成用户自定义事件对象。

Touch事件类型

Touch事件

touchmove：当手指在屏幕上滑动时连续触发。 touchstart：当手指触摸屏幕时触发，即使屏幕上已有其他手指放置也会触发。 touchend：当手指从屏幕上移开时触发。

TouchEvent对象属性详解

TouchEvent对象

每次触发touch事件时，都会生成一个TouchEvent对象。以下是该对象中三个较为常用且重要的属性。

touches：当前位于屏幕上的所有手指的列表。 targetTouches：特定于事件目标的Touch对象数组（即当前手指）。 changeTouches：表示自上次触摸以来发生变化的Touch对象数组。

这里使用JS编写了一个touch事件，点击屏幕即可触发，并将事件对象在控制台打印出来，结果如下（箭头指向的是上述三个属性）：

window.addEventListener("touchstart",function(event){
  console.log(event);
})

触摸事件对象属性

touches、targetTouches和changeTouches均包含以下属性值。

clientX：触摸目标在视口中的x坐标。 clientY：触摸目标在视口中的y坐标。 identifier：标识触摸的唯一ID。 pageX：触摸目标在页面中的x坐标。 pageY：触摸目标在页面中的y坐标。 screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。 target：触摸的DOM节点目标。 沿用之前的示例，changeTouches对象在控制台的输出如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。