了解在JavaScript中使用触摸事件的基本知识

45 阅读1分钟

了解在JavaScript中使用触摸事件的基本知识

查看更多关于JavaScript事件的信息

触摸事件是那些在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。

它们允许你跟踪多点触摸事件。

我们有4个触摸事件。

  • touchstart 触摸事件已经开始(表面被触摸了)
  • touchend 触摸事件结束(表面不再被触摸)。
  • touchmove 手指(或触摸设备的任何东西)在表面上移动
  • touchcancel 触摸事件已被取消

每次触摸事件发生时,我们都会收到一个触摸事件

const link = document.getElementById('my-link')
link.addEventListener('touchstart', event => {
  // touch event started
})

以下是我们可以访问该事件的所有属性

  • identifier 这个特定事件的唯一标识符。用于跟踪多点触摸事件。相同的手指=相同的标识符。
  • clientX / 鼠标指针相对于浏览器窗口的x和y坐标,与滚动无关。clientY
  • screenX / 鼠标指针的x和y坐标在屏幕坐标中的位置。screenY
  • pageX / 鼠标指针在页面坐标中的x和y坐标(包括滚动)。pageY
  • target 触摸的元素