JavaScript中 Touch 事件详解

本文主要是介绍JavaScript中 Touch 事件详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. touch 事件简介

• touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发；
• touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动；
• touchend 事件：在用户从元素上移开手指时会发生。
• touchcancel 事件：在触摸事件被中断时发生。不同的设备会在不同的动作中中断触摸事件，如果发生这种“错误”，那么包含此事件来清理代码被认为是一种好习惯。

每个触摸事件被触发后会生成一个 event 对象，event 对象里额外包括以下三个触摸列表

举例区分触摸事件中的这三个属性：

1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2. 用第二个手指接触屏幕，此时，touches 有两个元素，每个手指触摸点为一个值。
   当两个手指触摸相同元素时，targetTouches 和 touches 的值相同，否则 targetTouches 只有一个值。
   changedTouches 此时只有一个值，为第二个手指的触摸点，因为第二个手指是引发事件的原因。
3. 用两个手指同时接触屏幕，此时 changedTouches 有两个值，每一个手指的触摸点都有一个值
4. 手指滑动时，三个值都会发生变化
5. 一个手指离开屏幕，touches 和 targetTouches 中对应的元素会同时移除，而 changedTouches 仍然会存在元素。
6. 手指都离开屏幕之后，touches 和 targetTouches 中将不会再有值，changedTouches 还会有一个值，
   此值为最后一个离开屏幕的手指的接触点。

触摸列表里每次触摸由 touch 对象组成（包含触摸信息）主要属性如下：

2. Vue中 使用 touch 事件简单案例

效果：

完整代码：

<template>
  <div class="test">
    <div class="wrap">
      背景区
      <div class="animate__animated animate__zoomIn insert" v-if="showDeviceImg">插入图形</div>
    </div>
    <div class="drawer" ref="drawer">触摸滑动区域</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDeviceImg:false,
      startY: 0,
      endY:0,
    };
  },
  methods: {
    handleTounchListener() {
      this.$refs.drawer.addEventListener('touchstart', (event) => {
        // 获取触摸初始 Y 坐标
        console.log(event)
        this.startY = event.targetTouches[0].pageY;
      })
      this.$refs.drawer.addEventListener('touchmove', (event) => {
        // 若两个接触点，return
        if (event.targetTouches.length > 1){ return }

        this.endY = event.targetTouches[0].pageY;
        const distance = this.endY - this.startY; // 计算起止位置纵坐标差值
        if(distance > 60){
          // 向下滑动
          this.showDeviceImg = true;
        }else if(distance < -60){
          // 向上滑动
          this.showDeviceImg = false;
        }
        event.preventDefault(); // 阻止默认滚动
      })
      this.$refs.drawer.addEventListener('touchend', (event) => {
        console.log('touchEnd',event.targetTouches)
      })
      this.$refs.drawer.addEventListener('touchcancel', (event) => {
        console.log('touchCancel', event)
      })
    },
  },
  mounted() {
    this.handleTounchListener()
  },
};
</script>

<style lang="stylus" scoped>
.test {
  font-size: 25px;
  text-align: center;
  .wrap{
    width: 100%;
    min-height: 10vh;
    background-color: red;
    .insert{
      width: 100%;
      height: 30vh;
      background-color: green;
    }
  }
  .drawer{
    width: 100%;
    height: 100vh;
    background-color: pink;
  }
}
</style>  

这篇关于JavaScript中 Touch 事件详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！