如何利用原生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触摸滑动监听事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用javaScript处理常用事件详解

    利用javaScript处理常用事件详解

    JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o

  • JavaScript之事件循环案例讲解

    js中的事件循环 因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点 事件驱动 从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队

  • 详解JS浏览器事件模型

    详解JS浏览器事件模型

    什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完

  • JavaScript中事件冒泡机制示例详析

    JavaScript中事件冒泡机制示例详析

    什么是冒泡? DOM事件流(event  flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed  bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕

  • 浅谈JS和Nodejs中的事件驱动

    事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式. 在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer). 主题就像调频收音机一样,向有兴趣收听该主题所说内容的观察者进行广播. 观察者可能只有一个,也可能有一百个,这都没有关系,只要主题有一些要广播的消息就够了. 请记住,事件驱动.发布-订阅和观察者模式在实践中不是一回事,但在理想情况下,它们使用相同的方法:一个实体广播一条消息,其他实体侦听该消息. 发布

  • JavaScript WebAPI、DOM、事件和操作元素实例详解

    JavaScript WebAPI、DOM、事件和操作元素实例详解

    目录 WebAPI DOM DOM树 DOM获取元素方式 document对象属性 事件 事件的使用步骤 事件的类型 操作元素 操作元素内容 操作元素属性 操作元素样式 排他思想 H5自定义属性 总结 WebAPI API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码.无须理解其内部工作机制细节,只需知道如何使用即可 简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 WebAPI:主要针对浏览器

  • Vue.js前端框架之事件处理小结

    Vue.js前端框架之事件处理小结

    1. v-on 事件监听 监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()

  • 关于js的事件循环机制剖析

    关于js的事件循环机制剖析

    前言 众所周知, JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?其中的原理与事件循环机制大有关系. 在探索事件循环之前,我们得先了解浏览器执行线程~~ 浏览器的渲染进程是多线程的,浏览器每一个tab标签都代表一个独立的进程,其中浏览器内核属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等.其包含的线程有以下几种 GUI 渲染线程:负责渲染页面,解析 HTML,CSS 构成 DOM 树: JS 引擎线程:解释执行代码.用户输入和网络请求:

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

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

    前言 今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做个记录.先把实现的效果贴出来: 构思 想要写出丝滑的触摸滑动事件的监听,要考虑以下3个方面的逻辑: 距离: 滑动距离要大于40 时间: 滑动时间小于在0.5秒,即500毫秒内完成手指按下,拖动,离开(避免只是手指在屏幕就触发) 滑动方向: 左右滑动的条件是:X轴移动的距离大于Y轴移动的距离,为正则向左,为负则向右 上下

  • 教你3分钟利用原生js实现有进度监听的文件上传预览组件

    教你3分钟利用原生js实现有进度监听的文件上传预览组件

    前言 本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等. 组件设计架构如下: 涉及的核心知识点如下: 闭包:减少变量污染,缩短变量查找范围 自执行函数 file API:对文件进行读取,解析,监控文件事件 DocumentFragment API:主要用来优化dom操作 minix :用来实现对象混合

  • 利用原生js模拟直播弹幕滚动效果

    利用原生js模拟直播弹幕滚动效果

    目录 1.基本原理 2.具体代码 总结 1.基本原理 首先将直播区域分成十份(我个人自己为了便于计算分成十份),将输入的内容随机放到分成的十份区域中,插入到十份区域右边的视图之外,然后调用动画,按照随机的速度从右向左移动,当移动到左侧区域视图之外移除此滚动元素. 2.具体代码 <div class="move_video_content"> <div class="video_content"> <div class="vid

  • 利用原生JS实现懒加载lazyLoad的三种方法总结

    利用原生JS实现懒加载lazyLoad的三种方法总结

    目录 前言 Method 1: 高度对比 Method 2: 使用getBoundingClientRect() 的API Method 3: 采用最新的 IntersectionObserver 构造函数 总结 前言 首先我们先搭建好页面如下: <style> * { padding: 0%; margin: 0%; } .contain img { width: 600px; height: 400px; } ul { list-style: none; } li { display: i

  • 利用原生JS自动生成文章标题树的实例

    实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello

  • 利用原生js和jQuery实现单选框的勾选和取消操作的方法

    根据以下的Demo,大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = document.getElementById("b1"); //alert(

  • 利用原生JS实现欢乐水果机小游戏

    简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单

  • 原生JS实现鼠标滑动撒爱心特效

    原生JS实现鼠标滑动撒爱心特效

    本文实例为大家分享了一个鼠标滑动撒爱心的js特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 如何利用原生JS实现图片预览加上传(前后端交互)

    如何利用原生JS实现图片预览加上传(前后端交互)

    目录 前言 效果大致如下 前端代码 后端代码 总结 前言 最近在写vue项目的时候发现了个Vant的一个upload的图片上传的组件,就好奇了一下下,于是萌生了一个自己手写一个图片上传的组件的想法,您猜怎么着,还真给我实现了,那今天就和大家分享一下,大家有兴趣的可以了解一下啦,写进项目中可能会是个加分点哦!! 我们知道文件上传是需要前后端交互的,所以我这边给出前后端代码. 文件上传大致分为以下几个步骤 前端文件选择上传的文件类型 拿到文件信息 将选择的文件(视频或图片)在前端页面预览出来 将文件

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

随机推荐