javaScript-touch事件详解(touchstart、touchmove和touchend)-滑动事件案例

淡淡的烟草味﹌ 2022-10-16 07:50 511阅读 0赞

> HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
> 
> 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
    
    touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
    
    touchend事件：当手指从屏幕上离开的时候触发。
    
    touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

> 上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。

touches：表示当前跟踪的触摸操作的touch对象的数组。
    
    targetTouches：特定于事件目标的Touch对象的数组。
    
    changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

> 每个Touch对象包含的属性如下

clientX：触摸目标在视口中的x坐标。
    
    clientY：触摸目标在视口中的y坐标。
    
    identifier：标识触摸的唯一ID。
    
    pageX：触摸目标在页面中的x坐标。
    
    pageY：触摸目标在页面中的y坐标。
    
    screenX：触摸目标在屏幕中的x坐标。
    
    screenY：触摸目标在屏幕中的y坐标。
    
    target：触目的DOM节点目标。

**例子**

# 案例 #

<template>
      <div>
        <div class="biggestBox">
          <ul>
            
            <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
              
              <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
                <div class="contant">
                  <img class="image" :src="item.imgUrl" alt />
                  <div class="rightBox">
                    <div>{
       {item.title}}</div>
                    <div>{
       {item.subheading}}</div>
                    <div>{
       {item.faddish}}</div>
                    <div>{
       {item.price}}</div>
                  </div>
                </div>
              </div>
              <div class="removeBtn" @click="remove" :data-index="index">删除</div>
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "index",
      data() {
        return {
          lists: [
            {
              title: "标题1",
              imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",
              subheading: "副标题1",
              faddish: "爆款",
              price: "￥12.00",
            },
            {
              title: "标题2",
              imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",
              subheading: "副标题2",
              faddish: "爆款",
              price: "￥58.00",
            },
            {
              title: "标题3",
              imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",
              subheading: "副标题3",
              faddish: "爆款",
              price: "￥99.99",
            },
            {
              title: "标题4",
              imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",
              subheading: "副标题4",
              faddish: "爆款",
              price: "￥88.32",
            },
            {
              title: "标题5",
              imgUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg",
              subheading: "副标题5",
              faddish: "爆款",
              price: "￥9999.99",
            },
          ],
          startX: 0, //滑动开始
          endX: 0, //滑动结束
        };
      },
      methods: {
        // 向左滑动出现删除按钮时，点击商品信息区域取消删除
        oneself() {
          if (this.checkSlide()) {
            this.restSlide();
          } else {
            // 点击商品信息弹出弹框
            alert("hello Word!");
          }
        },
        //滑动开始
        touchStart(e) {
          // 记录初始位置
          this.startX = e.touches[0].clientX;
        },
        //滑动结束
        touchEnd(e) {
          // 当前滑动的父级元素
          let parentElement = e.currentTarget.parentElement;
          // 记录结束位置
          this.endX = e.changedTouches[0].clientX;
          // 左滑大于30距离删除出现
          if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
            this.restSlide();
            parentElement.dataset.type = 1;
          }
          // 右滑
          if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
            this.restSlide();
            parentElement.dataset.type = 0;
          }
          this.startX = 0;
          this.endX = 0;
        },
        //判断当前是否有滑块处于滑动状态
        checkSlide() {
          let listItems = document.querySelectorAll(".li_vessel");
          for (let i = 0; i < listItems.length; i++) {
            if (listItems[i].dataset.type == 1) {
              return true;
            }
          }
          return false;
        },
        //复位滑动状态
        restSlide() {
          let listItems = document.querySelectorAll(".li_vessel");
          // 复位
          for (let i = 0; i < listItems.length; i++) {
            listItems[i].dataset.type = 0;
          }
        },
        //删除数据信息
        remove(e) {
          // 当前索引值
          let index = e.currentTarget.dataset.index;
          // 复位
          this.restSlide();
          // 删除数组lists中一个数据
          this.lists.splice(index, 1);
        },
      },
    };
    </script>
    
    <style scoped>
    .biggestBox {
      overflow: hidden; /*超出部分隐藏*/
    }
    ul {
      /* 消除 ul 默认样式 */
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .li_vessel {
      /* 全部样式 0.2秒 缓动*/
      transition: all 0.2s;
    }
    /* =0隐藏 */
    .li_vessel[data-type="0"] {
      transform: translate3d(0, 0, 0);
    }
    /* =1显示 */
    .li_vessel[data-type="1"] {
      /* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
      transform: translate3d(-164px, 0, 0);
    }
    /* 删除按钮 */
    .li_vessel .removeBtn {
      width: 664px;
      height: 403px;
      background: #ff4949;
      font-size: 66px;
      color: #fff;
      text-align: center;
      line-height: 403px;
      position: absolute;
      top: 0px;
      right: -64px;
      border-radius: 2px;
    }
    /* 左边的图片样式 */
    .contant {
      overflow: hidden; /*消除图片带来的浮动*/
      padding: 10px;
      background: #ffffff;
    }
    
    .contant .image {
      width: 1300px;
      height: 1300px;
      border-radius: 4px;
      float: left;
    }
    /* 右边的文字信息样式 */
    .rightBox {
      overflow: hidden;
      padding-left: 8px;
    }
    .rightBox div:first-child {
      font-weight: bold;
    }
    .rightBox div:nth-child(2) {
      margin-top: 4px;
      font-size: 64px;
    }
    .rightBox div:nth-child(3) {
      width: 124px;
      background: rgb(219, 91, 113);
      color: white;
      font-size: 62px;
      text-align: center;
      padding: 2px 4px 2px 4px;
      margin-left: auto;
    }
    .rightBox div:last-child {
      color: red;
      font-size: 64px;
      font-weight: bold;
    }
    </style>

![20210528115025621.gif][]

[20210528115025621.gif]: /images/20221014/d8851988c0ae491291d8bf60b25370e2.png