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

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

大家好,又见面了,我是你们的朋友全栈君。

 

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节点目标。

例子

function load (){  
   
    document.addEventListener('touchstart',touch, false);  
    document.addEventListener('touchmove',touch, false);  
    document.addEventListener('touchend',touch, false);  
       
    function touch (event){  
        var event = event || window.event;  
           
        var oInp = document.getElementById("inp");  
   
        switch(event.type){  
            case "touchstart":  
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
            case "touchend":  
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
        }  
           
    }  
}  
window.addEventListener('load',load, false);  

案例

<template>
  <div>
    <div class="biggestBox">
      <ul>
        <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
        <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
          <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
          <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>

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150784.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 职称计算机一个模块1500,职称计算机考试模块如何选择

    职称计算机一个模块1500,职称计算机考试模块如何选择职称计算机考试模块如何选择选择模块的原则:1、熟悉度:选择自己最常用切最熟悉的模块进行学习考试,像WindowsXP、Word2003、Excel2003、PPT2003、Internet应用、网页制作等都是大家较为熟悉的模块。2、相关性:有些模块之间的相关性很近,比如:学了Word之后再去学习PPT及Frontpage就显得非常容易。3、常用性:像Windows98、Word98、E…

  • hough变换检测圆原理(定位变换后的面如何变成实体)

    Hough变换基本原理Hough变换是由PaulHough于1962年提出的一种检测圆的算法,它的基本思想是将图像从原图像空间变换到参数空间,在参数空间中,使用大多数边界点都满足的某种参数形式作为图像中的曲线的描述,它通过设置累加器对参数进行累积,其峰值对应的点就是所需要的信息。Hough变换最大的优点是对噪声不敏感。对于满足直线方程y=ax+b的某一个点(x0,y0),对应于参数平…

  • pycharm最新激活码汇总,亲测可用,定期更新_在线激活

    (pycharm最新激活码汇总,亲测可用,定期更新)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 多线程notify notifyall_线程wait和notify使用

    多线程notify notifyall_线程wait和notify使用涉及JAVA线程的状态问题,不清楚的可以参考我的另一篇:https://blog.csdn.net/q5706503/article/details/84350887我们知道notify是Object的本地final方法,无法被重写,用来唤醒线程,那么该怎么用,唤醒的又是谁呢?用一句话做答复:notify唤醒的是其所在锁所阻塞的线程不理解看下面的分析和例子:wait…

  • window location href 跳转之后怎么获得后面带参数

    window location href 跳转之后怎么获得后面带参数functionGetRequest(){varurl=location.search;//获取url中"?"符后的字串vartheRequest=newObject();if(url.indexOf("?")!=-1){varstr=url…

  • 八皇后算法解析[通俗易懂]

    八皇后算法解析[通俗易懂]今天研究力扣的一道题死活写不出来对应的算法,没办法自己算法基础太差。于是看了下答案,发现使用什么回溯算法,菜鸟表示平时开发期间写的最复杂的程序就是写了两层for循环,已经很牛逼了有木有?这个回溯算法什么鬼?于是乎百度了下,算是了解了回溯算法是什么玩意儿。这里分析一波八皇后算法来加深一下理解。https://blog.csdn.net/microopithecus/article/details/…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号