首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

检测手指何时从触摸板上移出,但由于“预测性触摸”而仍在滚动- JS

检测手指何时从触摸板上移出,但由于“预测性触摸”而仍在滚动是一个涉及到触摸事件和滚动行为的问题。以下是一个完善且全面的答案:

在前端开发中,可以通过监听触摸事件来检测手指从触摸板上移出的时机。常用的触摸事件包括touchstart、touchmove和touchend。

当手指触摸触摸板时,会触发touchstart事件,可以在事件处理程序中记录下开始触摸的时间和位置。

接着,在touchmove事件中,可以实时获取手指的位置,并根据手指的移动距离和时间来判断手指是否已经离开触摸板。

最后,在touchend事件中,可以确认手指已经离开触摸板,并触发相应的滚动停止逻辑。

然而,由于“预测性触摸”可能会导致手指在实际离开触摸板之前触发touchend事件。为了解决这个问题,可以在代码中引入额外的判断逻辑。

一种常用的方法是通过touchcancel事件来处理“预测性触摸”。当预测性触摸发生时,会触发touchcancel事件,可以在事件处理程序中取消之前的滚动行为。

在移动开发中,可以使用JavaScript进行触摸事件的监听和处理。一些常用的库和框架,如React Native和Vue Native,也提供了相应的API和组件来处理触摸事件。

在腾讯云的产品生态中,无论是前端开发还是后端开发,都可以选择使用云服务器(CVM)、云数据库(CDB)、云存储(COS)等产品来支持应用的部署和运行。具体推荐的腾讯云产品和产品介绍链接如下:

  • 云服务器(CVM):腾讯云提供的弹性云服务器,可按需购买、按量付费,支持多种操作系统和应用环境。了解更多信息,请访问云服务器(CVM)产品介绍
  • 云数据库MySQL版(CDB):腾讯云提供的稳定可靠的云数据库服务,支持高可用、自动备份、容灾等特性,适用于各种规模的应用程序。了解更多信息,请访问云数据库MySQL版(CDB)产品介绍
  • 云对象存储(COS):腾讯云提供的高扩展性、低成本的对象存储服务,可用于存储和处理各种类型的文件和数据。了解更多信息,请访问云对象存储(COS)产品介绍

这些腾讯云产品可以满足前端开发、后端开发和云计算领域中的各种需求,支持快速部署和扩展应用,提供稳定可靠的基础设施和服务。

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

相关·内容

10-移动端开发教程-移动端事件

如何用户的手指触屏设备的边缘移出了触屏设备,也会触发 touchend 事件。 touchend 事件的 target 也是与 touchstart 的 target 一致,即使已经移出了元素。...触摸事件对象 TouchEvent 是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。...div 先放1个手指在其他地方,然后再放1个手指在div 先放1个手指在其他地方,然后再逐渐放2个手指在div 3.3 Touch详解 ​ Touch表示用户和触摸设备之间接触时单独的交互点...这个交互点通常是一个手指或者触摸笔,​ 触摸设备通常是触摸屏或者触摸板。...8. target 总是表示 手指最开始放在触摸设备的触发点所在位置的 element。

6.8K80

10-移动端开发教程-移动端事件

2.4 touchend事件 ​ 当用户的手指抬起的时候,会触发 touchend 事件。如何用户的手指触屏设备的边缘移出了触屏设备,也会触发 touchend 事件。...触摸事件对象 TouchEvent 是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。...这个交互点通常是一个手指或者触摸笔,​ 触摸设备通常是触摸屏或者触摸板。...不会包括左边的滚动距离。 5. clientY 触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。...8. target 总是表示 手指最开始放在触摸设备的触发点所在位置的 element。

6.4K70
  • 触屏事件

    触屏事件概述 移动端浏览器兼容较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...触摸事件对象(TouchEvent) TouchEvent 是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等 touchstart、touchmove、touchend 三个事件都会各自有事件对象。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

    78641

    移动端轮播图笔记

    1.触屏事件 1.1触屏事件概述 移动端浏览器兼容好,我们不需要考虑以前JS的兼容问题,可以放心使用原生JS书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也叫触摸事件),Android...触屏事件可以相应用户手指对屏幕或者触控板操作 常见的触屏事件: 1.touchstart:手指触摸到一个DOM元素时触发 2.touchmove:手指在一个DOM元素滑动时触发 3.touchend:...手指从一个DOM元素移开时触发 1.2触摸事件对象(TochEvent) TouchEvent是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。...1.touches:正在触摸屏幕的所有手指的一个列表 2.targetTouches:正在触摸当前DOM元素手指的一个列表(最常使用) 3.changeTouches:手指状态发生了改变的列表,从无到有...自动播放功能无缝滚动 注意:我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断 此时需要添加检测过渡完成事件transitionend 判断条件:如果索引号等于3说明走到最后一张图片,此时索引号要复原为

    2.5K21

    jimojianghu

    然而那能怎么办,用户第一,自然得快速解决这个问题,而且是触控板和触摸屏都得解决。 在以前,如果要禁止移动端设备的触摸手指缩小放大的功能,都会想到使用viewport 来处理。...// 触摸板禁止手指缩放 document.addEventListener('wheel', function(event) { event.preventDefault() }, { passive...要禁止触摸屏的手指缩放,可以使用如下的 CSS 和 JS 两种方法。...js 处理 使用js代码来禁止触摸屏的手指缩放,和处理触控板类似的,这里主要是监听几个手势事件,touchstart, touchend, touchmove等。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件,禁止触摸板手指缩放界面。 但需要注意滚轮默认事件,如会导致子元素滚动失效,这时候就要在子元素阻止相同事件冒泡。

    3.8K00

    触屏事件

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

    73020

    JavaScript——触屏事件

    概述 移动端浏览器兼容较好,我们不需要考虑以前js的兼容性问题,可以放心的使用原生js书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。...常见的触屏事件如下: 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素滑动时触发 touchend 手指从一个DOM元素移开时触发...触摸事件对象 TouchEvent是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化事件。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。...touchend: 注意:手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault(); <!

    2.1K10

    移动端触屏事件

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

    2.9K30

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

    学习目标: 触屏事件概述: 移动端浏览器兼容较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android...再来试试最后一个: 表演一个摸完就走: 只要我的手指离开,就是touchend 触摸事件对象(TouchEvent) TouchEvent是一类描述手指触摸平面(触摸屏,触摸板...)的状态变化的事件.这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,比如多少个手指在点击....我们先来看看触摸事件的对象吧: 可以看到有很多很多的属性: 但是我们现阶段只要了解三个就好了: 我来测试一下第一个: 很可惜我们谷歌浏览器只能模拟一只手指触摸,length就代表有几根手指在屏幕触摸...,手机也能拖动元素,我们现在要学习一下: 但是我们还要注意,触摸滑动是有默认的屏幕滚动的,就是说本来我只想拖动盒子,但是 整个页面都滚动起来了.

    2.6K20

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

    导绪移动端浏览器兼容较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...1.触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素滑动时触发touchend手指从一个DOM元素移开时触发...console.log('我摸够了'); }) 2.触屏事件TouchEvent是一类描述手指触摸平面 (触摸屏、触摸板等)的状态变化的事件。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素手指的一一个列表changedTouches手指状态发生了改变的列表,从无到有,从有到无变化

    54300

    前端成神之路-WebAPIs07

    触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...1.1.2 触摸事件对象(TouchEvent) TouchEvent 是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。...(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault...自动播放功能-无缝滚动 注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件:如果索引号等于 3 说明走到最后一张图片...JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题专门存在,其功能单一,并且比较小。

    3.6K10

    「JavaScript 」动画基础 - 03

    触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...常见的触屏事件如下: 1.1.2 触摸事件对象(TouchEvent) TouchEvent 是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲: 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件:如果索引号等于 3 说明走到最后一张图片,此时 索引号要复原为...JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。特点:它一般是为了解决某个问题专门存在,其功能单一,并且比较小。

    1.2K20

    前端成神之路-WebAPIs06

    触屏事件概述 移动端浏览器兼容较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触摸事件对象(TouchEvent) TouchEvent 是一类描述手指触摸平面(触摸屏、触摸板等)的状态变化的事件。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

    1.3K40

    接上一篇事件详解

    mouseenter事件:在鼠标光标元素外部移动到元素范围之内被触发;这个事件不冒泡; mousemove事件:当鼠标指针在元素内部移动时重复地触发。...而是在页面btn元素触发的;但是我们要注意,在Opera9.5之前的版本中,wheelDelta值的正负号是颠倒的,如果我们要支持Opera9.5版本之前的话,那么我们需要浏览器检测技术来检测下;如下代码...detail属性中,当鼠标向前滚动时,这个属性值是-3的倍数,当鼠标滚轮向后滚动时,这个属性值是3的倍数;也可以给DOMMouseScroll事件使用在任何元素,且这个事件会冒泡到window对象,...: 当手指触摸屏幕时触发,即使是一个手指放在屏幕也会触发。...touchmove:当手指在屏幕滑动时连续地触发,这个事件发生期间,我们可以使用preventDefault()事件可以阻止滚动。 touchend: 当手指屏幕移开时触发。

    1.9K60

    JavaScript 编程精解 中文第三版 十五、处理事件

    为了获得输入的实际内容,最好直接焦点字段中读取它。 第 18 章将展示如何实现。 指针事件 目前有两种广泛使用的方式,用于指向屏幕的东西:鼠标(包括类似鼠标的设备,如触摸板和轨迹球)和触摸屏。...如前所述,一致并不是浏览器编程接口的强项。 触摸事件 我们使用的图形浏览器的风格,是考虑到鼠标界面的情况下而设计的,那个时候触摸屏非常罕见。...触摸屏与鼠标的工作方式不同:它没有多个按钮,当手指不在屏幕时不能跟踪手指(来模拟"mousemove"),并且允许多个手指同时在屏幕。...由于许多触摸屏可以同时检测多个手指,这些事件没有与其关联的一组坐标。...你可以这样,在每个触摸手指周围显示红色圆圈。

    5.6K20

    第134天:移动web开发的一些总结(二)

    border:0.5px;(错误),仅仅ios8可以使用 通用方案:scaleY(0.5) (3) 相对单位rem 为了适应各大屏幕的手机,px略显固定,不能根据尺寸的大小改变,使用相对单位更能体验页面兼容...因为字体的大小是趋向于阅读的实用,并不适合于排版布局。 同理,趋向于一些固定的元素的特性。我们不使用rem改为使用px去确保在不同屏幕上表现一致(跟rem的目的相反)。...touchstart:手指触摸屏幕触发(已经有手指放屏幕不会出发) touchmove:手指在屏幕滑动,连续触发 touchend:手指离开屏幕时触发 touchcancel:系统取消touch时候触发...所以建议直接用js计算。...,进行数值运算,转换为数字形式的时间戳 5) self.startX = evt.touches[0].pageX; //记录开始的位移,touches包含着所有手指触摸在屏幕的点的集合 -webkit-backface-visibility

    1.8K10

    VR开发--SteamVR框架工具(3):基础传送器+可调节高度的传送器+头盔碰撞淡出+玩家呈现+触摸板移动+游玩区空间组件

    3、VRTK_HeadsetCollisionFade:头盔碰撞淡出 (1)概念: 检测用户的VR头盔何时碰撞到其他游戏对象并淡出屏幕到一个单色处理玩家把头放进一个游戏对象里看到对象内部的裁剪,但不仅限于此...具体例子:VRTK框架工具中的17场景. 5、VRTK_TouchpadWalking:触摸板移动 (1)概念: 通过手指触摸板滑动来实现用这个脚本让游玩区在游戏世界中能够移动。...(2)脚本参数: Left Controller:如果勾选,左控制器的触摸板就能移动游玩区。在运行时可以被切换。 Right Controller:如果勾选,右控制器的触摸板就能移动游玩区。...Max Walk Speed:当触摸板触摸到轴的极限时游玩区所能达到的最大移动速度。触摸板距离中心越近的位置被触摸,移动速度就越慢。...Deceleration:减速度:当用户不再触摸触摸板时游玩区减速到完全停止的速度。这种减速度效果可以减缓可能遭受的移动恶心。

    1.6K10

    你无法检测触摸

    历史上看,有两个浏览器的功能已被用于“触摸检测”:媒体查询 和 Touch APIs。但这些离做到万无一失还很遥远。 跟我一起看下去。...Chrome 24.0 装载支持了所有这些接口,所以它们可以开始支持触摸不需要分为“触屏”和“非触屏”来构建。但是大量开发者依然在使用上面例子中的检测方法,所以这损坏了大量网站。...这是动态的, Jim ¶ 一个触摸屏可以作为一个外围设备连接到另一个非触摸式笔记本电脑,或者一个 KVM 开关可以触摸屏切换到触摸屏。这可以在浏览器会话过程中的任何时间发生。...手指友好的布局 ¶ 胖手指比鼠标更不准确,所以听起来我们适应触摸屏布局是有道理的:较大的控件,控件之间更多的空隙,等等。 但触摸屏是唯一的具有较差的指点精度的输入设备吗?...那智能电视的手势遥控器、Wii游戏机的遥控手柄,或者类似 Leap Motion 的手指跟踪技术又怎么样呢? 如果你特希望触屏检测在这些设备不会过时,千万别假定在监测屏幕时只需做好空间布局就够了。

    1.9K20

    手势魅力-设置一个触摸菜单

    (touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...触摸事件 我将使用JavaScript事件来检测我的移动触摸手势。...在这种情况下在那里是: touchstart:当你触摸DOM元素时触发 touchmove:当你沿着DOM元素拖动手指时触发 touchend:当你DOM元素中移除手指时触发 在这些事件中,我将使用触摸属性...触摸属性列出当前在屏幕的所有手指: PageX:返回手指放置在DOM中的x坐标。左边开始计算,如果适用,则考虑水平滚动 PageY:返回手指放置在DOM中的y坐标。...这有什么好处呢 浏览器将尝试匹配显示刷新,以允许流畅的动画 非活动选项卡中的动画将停止(在CPU花费的更少) 它不会耗尽你的电池寿命 拖动,点击和滑动:额外的东西要考虑移动触摸手势 这些事件需要能够检测和区分拖拽

    1.8K40
    领券