首页
学习
活动
专区
圈层
工具
发布

js触屏左右滑动事件

在JavaScript中,处理触屏设备的左右滑动事件通常涉及到监听触摸开始(touchstart)、触摸移动(touchmove)和触摸结束(touchend)事件。以下是实现这一功能的基础概念和相关代码示例:

基础概念

  1. 触摸事件:包括touchstart、touchmove和touchend,它们分别在用户触摸屏幕时、手指在屏幕上移动时和手指离开屏幕时触发。
  2. 触摸点:每个触摸事件都包含一个触摸点列表(touches),每个触摸点都有其位置信息(clientX和clientY)。

实现步骤

  1. 记录触摸开始时的位置。
  2. 在触摸移动过程中,计算当前位置与开始位置的差值。
  3. 根据差值的正负和大小判断滑动的方向和距离。
  4. 在触摸结束时,根据累计的滑动距离执行相应的操作。

示例代码

代码语言:txt
复制
let startX = 0;
let endX = 0;

document.addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
});

document.addEventListener('touchmove', function(event) {
    // 可以在这里添加逻辑来实时响应滑动
});

document.addEventListener('touchend', function(event) {
    endX = event.changedTouches[0].clientX;
    handleSwipe(startX, endX);
});

function handleSwipe(start, end) {
    const deltaX = end - start;
    const threshold = 50; // 设置一个阈值来判断是否为有效滑动

    if (Math.abs(deltaX) > threshold) {
        if (deltaX > 0) {
            console.log('向右滑动');
            // 执行向右滑动的操作
        } else {
            console.log('向左滑动');
            // 执行向左滑动的操作
        }
    }
}

优势与应用场景

  • 优势:这种方法能够提供直观的用户交互体验,特别适用于移动设备上的应用。
  • 应用场景:滑动切换页面、图片浏览、滚动列表、菜单导航等。

可能遇到的问题及解决方法

  1. 误触:用户无意间的触摸可能导致误操作。可以通过设置滑动阈值来减少误触。
  2. 多点触控:如果用户使用多个手指,可能会影响滑动判断。可以通过检查touches数组的长度来处理多点触控情况。
  3. 性能问题:频繁的touchmove事件可能导致性能问题。可以通过节流(throttling)或防抖(debouncing)技术来优化。

通过上述方法,可以有效地处理JavaScript中的触屏左右滑动事件,并根据具体需求进行相应的功能扩展和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Bootstrap幻灯轮播如何支持触屏左右滑动手势?

bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢...一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head...Next   关键的步骤来了,我们需要写一个javascript命令调用hammer.js...需要注意的是,jquery版本最好是1.9版本的jquery-1.9.1.min.js,否则可能在电脑上可以实现手势滑动,而在手机上无法触摸滑动   javascript命令这个是关键,不会写不会改就不好玩了

5K50

触屏事件

触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏事件如下: ? 2....触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

1.7K41
  • 触屏事件

    touch:触摸事件 常用触摸事件如下 事件 描述 touchstart 手指触摸到dom元素时触发 touchmove 手指在dom元素上滑动时触发 touchend 手指离开dom元素时触发 触摸事件对象...(TouchEvent) TouchEvent是一类描述手指在触摸平面(触摸屏。...触摸板等)的状态变化的事件,这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少等等 上述三个事件都有各自的事件对象 touchstart常用对象列表 触摸列表 描述 touches...= this.offsetTop; }) div.addEventListener('touchmove',function(e){ //计算滑动距离...this.style.transform = 'translate('+moveX+'px,'+moveY+'px)' //手指移动会触发滚动屏幕,这里我们要取消其默认事件

    1.6K10

    触屏事件

    1触屏事件 1.1. 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏事件如下: 1.3.2....触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。... // (1) 触摸元素touchstart : 获取手指初始坐标,同时获得盒子原来的位置 // (2) 移动手指 touchmove :计算手指的滑动距离

    1.7K20

    JavaScript——触屏事件

    概述 移动端浏览器兼容性较好,我们不需要考虑以前js的兼容性问题,可以放心的使用原生js书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。...常见的触屏事件如下: 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发...触摸事件对象 TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化事件。...touchstart、touchmove、touchend三个事件都会各自事件对象 触摸事件对象重点我们看三个常见对象列表: 触摸列表 说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches

    3K10

    移动端触屏事件

    触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏事件如下: ? 2....触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

    4.1K30

    css+js实现左右滑动卡片组件

    最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。...结构与样式 结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。 样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。 a....目标位移与帧位移 为了做出滑动后到停留位置的缓动效果,所以当用户左右滑动屏幕时,会记录滑动距离,计算出卡片该到的目标位移位置,目标位移位置是有规则的,因为这里有10张卡片均分宽度,位置必须是(100%/...目标位移代码片段 onDocumentMouseUp : function(e){ //如果是点击事件 不设置移动 if (!...下图是chrome cpu6倍减速调试效果,没有触发layout,FPS基本维持在60左右。

    34.6K102

    WPF 触屏事件后触发鼠标事件的问题及 DataGrid 误触问题

    WPF 触屏事件后触发鼠标事件的问题及 DataGrid 误触问题 目录 一、触屏事件连带触发鼠标事件的问题 二、DataGrid 误触问题及解决方法 独立观察员 2021 年 10 月 10 日 一、...、MouseDown、PreviewMouseUp、MouseUp),这个据说是微软为了在触屏设备上兼容老程序,让这些程序能够接收从触屏事件转换来的鼠标事件,从而能正常工作。...这个触屏事件提升为鼠标事件的一个表现就是,触屏拖动或者点击,会在屏幕上 “残留” 鼠标,当然,是不可见的,或者表现为一个小星号。所以,从这个角度出发,产生了这样一种方法:点击后将鼠标移开。...,而且没有触屏事件,这个不用怀疑,通过调试打断点很容易观察到。...比如,公司的触摸屏支持 10 点触控,那么这里就是点击 10 下左右触发;我自己的一个小触摸屏,支持 5 点触控,这边则是在空白处点击 4 下触发。

    4.1K10

    【愚公系列】2023年12月 HarmonyOS教学课程 035-ArkUI事件(触屏事件)

    前言 触屏事件是指通过触摸屏幕来进行操作和交互的事件。常见的触屏事件包括点击(tap)、双击(double tap)、长按(long press)、滑动(swipe)、拖动(drag)等。...触屏事件通常用于移动设备和平板电脑等具有触摸屏幕的设备上,用户可以通过触摸屏幕上的不同区域或者以不同的方式进行操作,从而实现各种功能和交互效果。...触屏事件可以被应用程序或者操作系统捕捉并响应,以实现用户与设备之间的交互。...一、触屏事件 在HarmonyOS中,触屏事件包括点击事件、拖拽事件和触摸事件,开发者可以通过使用HarmonyOS的触摸事件处理机制来捕获和处理这些事件。...触摸事件是一种用户与触摸屏或触摸设备进行交互的方式。

    44500

    从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

    /js/index.js"> 事件。...,或者最后一张往左滑动时,会造成空白 /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕,当一个元素的过渡效果执行完毕的时候,会触发这个事件*/ ulObj.addEventListener...开启定时器,自动轮播 添加移动端滑动事件,手动轮播。 添加过渡效果结束事件,解决手动滑动到第一张和最后一张时,出现空白的问题。 设置小白点,在自动轮播和手动轮播两个地方添加。...二、移动触屏事件 1、事件类型 touchstart: 手指触摸屏幕时触发 touchmove: 手指在屏幕上移动时触发 touchend: 手指离开屏幕时触发 细节: touch 事件的触发,必须保证元素有大于

    3.3K10

    把网页装进手机:PWA + 触屏翻页改造实录(含 iframe 手势注入技巧)

    风之谷家庭服务器系列·第3篇前言网页在手机浏览器里始终像个“访客”:地址栏占半寸、左右滑会触发返回手势、锁屏就断。改造目标四个字:像原生App——添加到主屏幕、全屏运行、左右滑翻页、断网也能打开书。...二、依赖本地化:把CDN搬回家epub.js、jszip全部下载到自家vendor/目录改本地引用。从此地铁里、飞机上照样开书——离线可用是家庭自建服务的尊严。...三、触屏翻页:iframe是个“事件黑洞”外层监听touchstart/touchend一切正常——直到内容渲染进epub.js的iframe:外层监听收不到iframe内部的事件,翻页手势直接失灵。...;用Playwright的p.devices["iPhone13"]设备描述跑真实视口回归,12项断言全过——包括“EPUBiframe内滑动真的翻了页”。...结语改完之后,家人手机桌面上的“书屋”图标,点击、滑动、翻页,和花几百块买的阅读器没有区别。

    13010

    前端成神之路-WebAPIs07

    07 - Web APIs 学习目标: 能够写出移动端触屏事件 能够写出常见的移动端特效 能够使用移动端开发插件开发移动端特效 能够使用移动端开发框架开发移动端特效 能够写出 sessionStorage...触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏事件如下: ?...1.1.2 触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。

    4.4K10

    JavaScript之移动端网页特效(1)

    学习目标: 触屏事件概述: 移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android...touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作 常见的触屏事件如下: 试着写一下,切换成模拟手机调试 再来试试触摸滑动事件...再来试试最后一个: 表演一个摸完就走: 只要我的手指离开,就是touchend 触摸事件对象(TouchEvent) TouchEvent是一类描述手指在触摸平面(触摸屏,触摸板...接下来就是手指滑动轮播图的部分: 移动也做好了,但是我们平常手机里的轮播图的滑动效果并不是这样的,而是当我们滑动很小距离时,图片会回弹回去,滑动的距离大了才会下一张,所以我们要根据moveX...但其实还是有很多bug...比如滑动着就消失了的小圆点,图片滑动到最后返回时还是没衔接上,但是太累了.明天复盘一次

    3.6K20

    「JavaScript 」动画基础 - 03

    触屏事件1.1.1 触屏事件概述移动端浏览器... 请注意,本文编写于 2082 天前,最后修改于 173 天前,其中某些信息可能已经过时。 1.1....触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。...常见的触屏事件如下: 1.1.2 触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。

    2K20

    【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

    导绪移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...1.触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...; }) // 手指触摸滑动DOM事件 div.addEventListener('touchmove', function () { console.log...console.log('我摸够了'); }) 2.触屏事件TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。...但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0] 里面的pageX和pageY3.拖动的原理:手指移动计算出手指移动的距离,然后用盒子原来的位置+手指移动的距离4.手指移动的距离 = 手指滑动中的位置

    2.3K00
    领券