如何利用原生JS实现触摸滑动监听事件

 更新时间:2021年06月15日 11:15:27   作者:南极大冰块  
这篇文章主要给大家介绍了关于如何利用原生JS实现触摸滑动监听事件的相关资料,文中将实现的原理以及代码介绍的非常详细,需要的朋友可以参考下

前言

今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做个记录。先把实现的效果贴出来:

构思

想要写出丝滑的触摸滑动事件的监听,要考虑以下3个方面的逻辑:

  • 距离: 滑动距离要大于40
  • 时间: 滑动时间小于在0.5秒,即500毫秒内完成手指按下,拖动,离开(避免只是手指在屏幕就触发)
  • 滑动方向:
    • 左右滑动的条件是:X轴移动的距离大于Y轴移动的距离,为正则向左,为负则向右
    • 上下滑动的条件是Y轴移动的距离大于X轴移动的距离,为正则向上,为负则向下

有了基础的构思,我们就可以根据这个思路来完成代码了~

监听的事件

说到监听触摸滑动,要用到的自然就是下面这三个触摸事件了:

1. touchstart 触摸开始,手指点击屏幕时触发(可监听多点触控,后面的手指也同样会触发)

2. touchmove 接触点改变,滑动时持续触发

3. touchend 触摸结束,手指离开屏幕时触发

这三个触摸事件每个都包括了三个触摸对象列表(可根据触摸点实现多点触控):

1. touches:当前屏幕上的所有手指触摸点的列表

2. targetTouches:当前DOM元素上手指的列表

3. changedTouches:当前事件手指的列表

同时每个触摸对象Touch包含的属性如下:

- identifier:标识触摸的唯一ID

- pageX:触摸点在页面中的x坐标

- pageY:触摸点在页面中的y坐标

- screenX:触摸点在屏幕中的x坐标

- screenY:触摸点在屏幕中的y坐标

- clientX:触摸点在视口中的x坐标

- clientY:触摸点在视口中的y坐标

- target:触摸的DOM节点

代码实现

有了上面的构思和触摸事件的基础,我们很容易就能把代码敲出来啦~

let box = document.querySelector('body') // 监听对象
let startTime = '' // 触摸开始时间
let startDistanceX = '' // 触摸开始X轴位置
let startDistanceY = '' // 触摸开始Y轴位置
let endTime = '' // 触摸结束时间
let endDistanceX = '' // 触摸结束X轴位置
let endDistanceY = '' // 触摸结束Y轴位置
let moveTime = '' // 触摸时间
let moveDistanceX = '' // 触摸移动X轴距离
let moveDistanceY = '' // 触摸移动Y轴距离
box.addEventListener("touchstart", (e) => {
    startTime = new Date().getTime()
    startDistanceX = e.touches[0].screenX
    startDistanceY = e.touches[0].screenY
})
box.addEventListener("touchend", (e) => {
    endTime = new Date().getTime()
    endDistanceX = e.changedTouches[0].screenX
    endDistanceY = e.changedTouches[0].screenY
    moveTime = endTime - startTime
    moveDistanceX = startDistanceX - endDistanceX
    moveDistanceY = startDistanceY - endDistanceY
    console.log(moveDistanceX, moveDistanceY)
    // 判断滑动距离超过40 且 时间小于500毫秒
    if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
        // 判断X轴移动的距离是否大于Y轴移动的距离
        if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        // 左右
        console.log(moveDistanceX > 0 ? '左' : '右')
        } else {
        // 上下
        console.log(moveDistanceY > 0 ? '上' : '下')
        }
    }
})

运行一下看看吧:

可以看出,触摸时间大于500ms不会触发,滑动距离小于40也不会触发,如果是有角度的滑动,则会以XY轴移动距离最远的为准。完美实现!

后记

前端框架发展日益迅猛,很多人直接上手学习框架也毫无压力,对原生JS的学习就不那么重视了。但万变不离其宗,框架的优势在于它的设计思想和模式,想要深刻的理解还是要有原生JS做基础,想要走得远,还是要把基础夯实,毕竟万丈高楼平地起不是?

到此这篇关于如何利用原生JS实现触摸滑动监听事件的文章就介绍到这了,更多相关JS触摸滑动监听事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解JavaScript中if语句优化和部分语法糖小技巧推荐

    详解JavaScript中if语句优化和部分语法糖小技巧推荐

    在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,本文给大家介绍JavaScript中if语句优化和部分语法糖小技巧,感兴趣的朋友一起看看吧
    2022-05-05
  • Openlayers测量距离与面积的实现方法

    Openlayers测量距离与面积的实现方法

    这篇文章主要为大家详细介绍了Openlayers测量距离与面积的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • layui复选框的全选与取消实现方法

    layui复选框的全选与取消实现方法

    今天小编就为大家分享一篇layui复选框的全选与取消实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序自定义键盘 内部虚拟支付

    微信小程序自定义键盘 内部虚拟支付

    这篇文章主要为大家详细介绍了微信小程序自定义键盘,内部虚拟支付,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JavaScript 模块化详解

    JavaScript 模块化详解

    这篇文章主要介绍了JavaScript 模块化详解,块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信,下面一起进入文章来接更多详细内容
    2021-12-12
  • 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码

    完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码

    这篇文章主要给大家分享了完美兼容IE,chrome,ff的设为首页、收藏本站及保存到桌面js代码,有需要的小伙伴参考下。
    2014-12-12
  • Bootstrap实现提示框和弹出框效果

    Bootstrap实现提示框和弹出框效果

    这篇文章主要为大家详细介绍了Bootstrap实现弹出框和提示框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 利用Javascript裁剪图片并存储的简单实现

    利用Javascript裁剪图片并存储的简单实现

    裁剪图片对我们来说是再熟悉不过的了,最近工作中就又遇到了这个需求,所以想着干脆整理下来,方法大家和自己在需要的时候参考学习,所以这篇文章主要介绍了利用Javascript裁剪图片并存储的简单实现,后端PHP处理我用的是THINKPHP框架,需要的朋友可以参考下。
    2017-03-03
  • 基于JavaScript实现文件秒传功能

    基于JavaScript实现文件秒传功能

    在互联网高速发展的今天,文件上传已经成为网页应用中的一个基本功能,随着用户上传文件尺寸的不断增大、对质量清晰度的要求也越来越高,所以本文给大家介绍了如何使用JavaScript实现文件秒传功能,需要的朋友可以参考下
    2024-01-01
  • 了解一点js的Eval函数

    了解一点js的Eval函数

    之前只知道eval可以解析字符串,刚刚网上看了又了解了一点,这里贴出来,不懂的也看看哈
    2012-07-07

最新评论