欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript touch 事件 touchstart touchmove touchend

程序员文章站 2024-01-24 17:33:58
...

JavaScript touch 事件 touchstart touchmove touchend

MDN 官方文档: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

一、touch 事件有哪些

页面中的 touch 事件一般在移动端使用,pc 端是没有效果的。
touch 相关的事件有四个

  • touchstart 触摸开始
  • touchmove 触摸移动中
  • touchend 触摸结束
  • touchcancel 触摸取消

二、如何使用

只需要给你需要添加触摸方法的 dom 元素添加对应的事件监听即可。
具体的操作需要根据 event 中的属性来操作,后面细说。

document.addEventListener('touchstart', event => {
  console.log('touchstart')
}, false)

document.addEventListener('touchmove', event => {
  console.log('touchmove')
}, false)

document.addEventListener('touchend', event => {
  console.log('touchend')
}, false)

二、相关的对象,用到的事件属性

先来看一下事件 event 的一些属性:

JavaScript touch 事件 touchstart touchmove touchend

touchstarttouchmoveevent 里面都会有一个 touches 对象,这是个数组,记录了触摸的个数和对应的在页面中的位置。而在 touchend 中就没有这个 touches 对象。

看一下 touches 对象的具体属性:

JavaScript touch 事件 touchstart touchmove touchend

所以我们在方法中就能实时获取当前触摸的位置,有了 x y 就可以做我们想做的事了。

三、实现一个触摸移动 dom 元素的实例

做一个页面,页面里面有 n 个方块,手机上拖动方块可以移动其位置。

我们需要做的:

  1. bodyposition 定义为 relative,方块的 position 定义为 absolute
  2. 然后给 documnet 添加那三个 touch 事件: touchstart touchmove touchend
  3. 在方法内部,判断被触摸的元素是不是方块,避免把 body 也拖动了。如果是方块就拖动,如果不是就不拖动。
window.onload = () => {
   $('body').style.height = window.innerHeight + 'px';
   init();
}

function init(){
   document.addEventListener('touchstart', event => {
      console.log(event);
      let touch = event.touches[0];
      console.log('start:', touch.pageX, touch.pageY)
   }, false)

   document.addEventListener('touchmove', event => {
      // 只移动 .square dom
      if (event.target.classList.contains('square')){
         let touch = event.touches[0];
         console.log('move:', touch.pageX, touch.pageY)
         move(event.target, touch);
      }
   }, false)

   document.addEventListener('touchend', event => {
      console.log('end:')
   }, false)
}

function move(item, touch){
   let width = item.offsetWidth;
   let height = item.offsetHeight;
   item.style.left = touch.pageX - width/2 + 'px';
   item.style.top = touch.pageY - height/2 + 'px';
}

function $(selector){
   return document.querySelector(selector)
}

四、效果

JavaScript touch 事件 touchstart touchmove touchend