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

touchmove事件意外地在加载时激发

touchmove事件是一种触摸移动事件,它在用户触摸屏幕并移动手指时触发。然而,如果touchmove事件在加载时意外地被激发,可能是由于以下原因之一:

  1. 代码错误:可能是由于代码中的错误导致touchmove事件在加载时被错误地触发。这可能是由于事件绑定的错误或其他代码逻辑问题引起的。在这种情况下,需要仔细检查代码并修复错误。
  2. 浏览器兼容性问题:不同的浏览器对touchmove事件的处理方式可能有所不同。某些浏览器可能会在加载时意外地触发touchmove事件,而其他浏览器则不会。为了解决这个问题,可以使用浏览器兼容性库或特定的事件处理方法来确保在不同浏览器上的一致性。
  3. 设备故障:在某些情况下,touchmove事件在加载时意外触发可能是由于设备故障引起的。这可能是由于设备的硬件问题或操作系统的错误导致的。在这种情况下,建议尝试在其他设备上测试相同的代码,以确定是否是设备本身的问题。

总结起来,touchmove事件在加载时意外触发可能是由于代码错误、浏览器兼容性问题或设备故障引起的。为了解决这个问题,需要仔细检查代码、处理浏览器兼容性,并在不同设备上进行测试。

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

相关·内容

网页|利用touch实现下拉刷新

1功能介绍 下拉刷新常见的手机app上大多都有运用。下拉刷新即向下拉重新加载、刷新。...最后当下拉到达设定最大值松手,执行回调,提示正在进行更新操作。如下图则为下拉刷新的实现效果: ? 图1 整体效果图 2下拉刷新的实现原理 实现下拉刷新的过程中会用到touch事件。...其中,touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。touchmove事件:当手指在屏幕上滑动的时候连续地触发。...touchcancel事件:当系统停止跟踪触摸的时候触发监听原生touchstart事件,记录其初始位置的值,并监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动...,语句是把“匿名函数”赋值给window的onload事件属性,当window加载完成时会触发onload事件,也就触发了“匿名函数”,执行函数体内的语句。

1.7K20

Vue移动端 Web App 点击穿透问题解决方案

,当我点击按钮,弹框一闪而过。...B元素A元素之上。我们B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。...通过上网查找有关资料,翻阅了移动端的书籍,发现在手机端中,事件的触发顺序为:touchstart -> touchmove -> touchend,而 click 事件有 300ms 的延迟,当 touchstart...如果A元素是一个链接,那此时页面就会意外地跳转。 解决方案 1. 改用 touch 事件 由于项目使用的是 Vue.js,这里就提供一下 Vue.js 的解决方法。...其他 tap 一词 对于 tap 这个词,用过 Zepto 或 KISSY 等移动端js库的人肯定对tap事件不陌生,做PC页面绑定 click,相应地手机页面就绑定 tap。

1.7K30
  • 📚一站式解决:H5开发全攻略,看这篇让你省时又省力

    当内容滚动到顶部或底部,滚动事件不会继续传递给父容器。...滚动穿透可能会对用户体验产生负面影响,因为用户可能意外地滚动到不相关的内容。...() { enableScroll(); } ant-mobile组件库解决方式 思想思路: 针对触摸滑动事件 touchmove,通过监听滑动方向和滚动元素的状态,决定是否阻止默认的滑动行为,从而防止滚动穿透...需要锁定滚动的情况下,给 document 添加 touchstart 和 touchmove 事件的监听器,通过捕获触摸滑动事件,并根据情况阻止默认行为,从而避免滚动穿透。...解锁滚动,从 document 移除对触摸事件的监听器,恢复默认的滑动行为。

    82621

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

    say no 弹性滚动 上拉刷新 tap事件基础 touch触摸事件 下拉加载 300ms: 移动web页面上的click事件响应都要慢上300ms 用300ms判断是单击还是双击 (1) tap基础事件...自定义tao事件原理: touchstart、touchend的记录时间、手指位置,touchend进行比较,如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短(一般认为是200ms...touchstart:手指触摸屏幕触发(已经有手指放屏幕上不会出发) touchmove:手指在屏幕上滑动,连续触发 touchend:手指离开屏幕触发 touchcancel:系统取消touch时候触发...(不常用)eg:滑动页面来了一个电话或者其他系统事件 除常见的事件属性外,触摸事件包含专有的触摸属性: touches:跟踪触摸操作的touch对象数组 targetTouches:特定事件目标的touch...当一个css3动画结束,我们可以监听相关事件AnimationEnd,比如对于webkit来说,是webkitAnimationEnd。

    1.8K10

    移动端web开发,click touch tap区别

    三:穿透原因 问题:HTML5点击了q以后,弹出b的弹框 因为tap事件是通过document绑定了touchstart和touchend事件实现,$('.q')上,当touchend事件冒泡到document...上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面 现在touchend冒泡到了document上,并且$('.b')页面的最前面,然后就触发了click事件 四:解决穿透问题...AMD,可按照AMD规范,用require.js的模块加载器引入),并且dom  ready初始化body上,如: $(function(){ new FastClick(document.body...而touchend是原生的事件dom本身上就会被捕获触发 $demo.hide(); e.preventDefault();//阻止“默认行为” }); 五:touch事件 touch是针对触屏手机上的触摸事件...现金大多数触屏手机webkit内核提供了touch事件的监听 包含:touchstart touchmove touchend touchcancel四个事件 touchstart touchmove

    2.3K100

    移动端touch事件影响click事件以及touchmove添加preventDefault导致页面无法滚动的解决方法

    之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发。...为了解决开发者需要,建议开发者touchstart时调用event.preventDefault,这样就可以保证内核会一起触发touchmove事件了。...给其他地方加的click事件也不触发了!!! 之后继续百度,得知当在移动端上点击屏幕,会依次触发touchstart,touchmove,touchend,click事件。...后来突然脑袋灵光一闪,既然touchstart中加了event.preventDefault会导致不触发click事件,那我touchmove中加可以吧?...然后我打开了这个插件的源码,终于touchmove中找到了答案 touchmove中有这样一段代码(下面是我自己抄过来简化过的): var w = x<0?

    3.3K20

    Unable to preventDefault inside passive event listener

    所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始, window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive...浏览器忽略 preventDefault() 就可以第一间滚动了。...passive: true }) 这就导致了一个问题: 如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉...两个方案: 1、注册处理函数,用如下方式,明确声明为不是被动的 window.addEventListener('touchmove', func, { passive: false }) 2、应用...touch-action 还有很多选项,详细请参考touch-action [注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true

    1.4K20

    【225】Game上应用观察者模式(Observer Pattern)

    Game.js文件中,目前有这样的代码: /// 初始化 init() { ... /// 监听触点移动事件 wx.onTouchMove(this.touchMove.bind(this...(e) } /// 触点结束事件回调函数 touchEnd(e) { this.currentPage.touchEnd(e) } 我们看一下,目前我们对触点移动事件和触点结束事件的监听,是init...接下来我们让Game类继承于Event,让Game触点移动和触点结束时分别派发“touchMove”和“touchEnd”事件,然后让游戏中的两个页面(IndexPage和GameOverPage)自己监听这两个监听事件并处理...我们注意到,这里有一个if判断,只有当前页是游戏激活的游戏页面(currentPage),才会触发处触点事件的处理。...GameOverPage类中,因为不需要知道touchMove事件,所以它的touchMove方法就不需要重写了。

    64720

    【移动端】touch事件及穿透事件

    bug收集:专门解决与收集bug的网站 网址:www.bugshouji.com touch 事件的来历 2007 苹果推出iphone,浏览器网页iphone上显示字体特别小,根本看不清楚...苹果的解决方案: 方案一:双指进行缩放 方案二:屏幕上双击进行放大(单击300ms后,再单击才算双击),造成了,移动端点击事件,300ms 延迟的问题 解决方案,就是使用touch事件来替代 移动端新增...touch事件 --- 只能使用现代事件进行添加 touchstart: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel:touch 取消,如来电等..., touchend 是否移出开始触摸的元素,e.target都是开始触摸的元素dom....因click是touch系列事件发生后300ms才触发的,混用click和touch肯定会导致穿透问题.

    2K10

    小程序里实现手势缩放,你可以这样做 | 实战教程

    我们发现微信提供 touchmove 事件,在用户触摸屏幕并在屏幕上移动手指,这个事件就会被触发。 手势缩放的核心思想是:根据两只手指相对距离的变化,对图片进行放大或缩小。...touchmove 事件可以实现的功能,大致可以总结为: 手指在屏幕上进行移动touchmove 事件就会以 16 ms 一次的频率不断被触发; 手指离开屏幕,touchend 事件会被触发。...touchmove 事件所包含的事件对象中有一个 touches 属性,此属性为当前停留在屏幕中的触摸点信息的数组。...实测中,使用 0.005 这个值可获得比较良好的缩放体验。 现在,我们为图片对象绑定 touchmove 事件。...这可以放大后滑动浏览图片时,拥有良好的浏览体验。 但是,我们发现 scroll-view 组件还存在缩放出现界面闪动的现象的 bug。

    2K20

    滚动穿透的6种解决方案【已自测】

    因此还需要我们对弹层的可滚动区域的滑动事件做监听: 第一种情况,若向上滑动,到达底部;或者第二种情况,若向下滑动,已到顶部。 这两种情况任意一种发生,就阻止滑动事件。 这段逻辑代码如下: ?...局限问题: 因为touchmove被禁掉了,就会造成弹窗内部所有位置都不能响应touchmove事件,效果上就是弹窗内部不能再滚动了。 赘述: 弹层不需要超出滚动的情况下,才可以使用这个。...2、禁掉弹窗的touchmove 的默认事件 ? 3、重写手势滑动效果 ?...7、另外这里还可以touchend事件里,把touchstart和touchmove包括自身touchend的事件都解绑掉。我偷懒就不写了。...最后总结: 接着最后一个方案的问题,我返回去测试了所有方案真机上打开弹窗的上滑或下拉问题。

    13.7K31

    移动端滚动研究

    模拟滚动:最典型的例子就是iscroll了,原理一般有两种: 监听滚动元素的touchmove事件,当事件触发修改元素的transform属性来实现元素的位移,让手指离开触发touchend事件,然后采用...监听滚动元素的touchmove事件,当事件触发修改元素的transform属性来实现元素的位移,让手指离开触发touchend事件,然后给元素一个css的animation,并设置好duration...方案2:页面使用正常滚动,将下拉刷新元素放置顶部top值为负值(正常情况下不可见),当页面处于顶部时下拉,这时监听touchmove事件,修改scrollcontent的tranlateY值,同时修改下拉刷新元素的...节流(Throttling) 防抖函数确实不错,但是也存在问题,譬如图片的懒加载,我希望在下滑过程中图片不断的被加载出来,而不是只有当我停止下滑时候,图片才被加载出来。...又或者下滑时候的数据的 ajax 请求加载也是同理。

    3.2K20

    js添加事件和移除事件:addEventListener()与removeEventListener()

    ,默认值为false 示例: 要在body上添加事件处理程序,可以使用下列代码: document.body.addEventListener('touchmove', function...('touchmove',bodyScroll,false); 重写后的这个例子addEventListener()和removeEventListener()中用的是相同的函数。...,需要使用共用函数;绑定和解除事件 事件没有”on” 即onclick写成click 2:共用函数不能带参数; 二.addEventListener()与removeEventListener()的第三个参数详解...布尔值参数是true,表示捕获阶段调用事件处理程序;就是最不具体的节点先接收事件,最具体的节点最后接收事件 如果是false,冒泡阶段调用事件处理程序;则是先寻找指定的位置,由最具体的元素接收...,然后逐级向上传播至最不具体的元素的节点(文档) DOM事件流如图(剪自javascript高级程序设计): 由图可知捕获过程要先于冒泡过程 即 true的触发顺序false前面

    8.1K30

    JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

    参考答案: 1.click 事件移动端会有 200-300ms 的延迟,主要原因是苹果手机设计时,考虑到用户浏览网页需要放大,所以,在用户点击的 200-300ms 之后,才触发 click,...2.touch 事件是针对触屏手机上的触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件的监听,让开发者可以获取用户触摸屏幕的一些信息。...其中包括:touchstart, touchmove, touchend, touchcancel 这四个事件,touchstart touchmove touchend 事件可以类比于 mousedown...isMove = false; // touchstart记录开始的时间 ele.addEventListener('touchstart', function...('touchmove', function(e) { isMove = true; }); // 如果touchmove事件触发或者中间时间超过了延迟时间

    6.4K40

    移动端 模拟手机联系人触摸A~Z导航

    HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母,能够相对应的显示文字。...有些手机的音乐导航也类似,具体可详见下图: touchmove的问题 移动端,我们可以使用touch事件进行处理,此处首先想到的是使用touchmove事件。...本身touchmove事件是会随着手指不断接触屏幕而不断被触发,而在事件的知识当中,我们有事件委托以及事件目标对象e.target的技术,因此,基本的实现思路就成了:将touchmove事件绑定在字母元素的父级身上...想法是好的,但是实际的操作中发现,虽然touchmove会触发多次,但是并不能够实时获取e.target(事件目标对象),这也就使得上面的这种思路成了空想。...是个目前而言,兼容性不错的一种方法,具体代码如下: <!

    1.6K50

    写一个H5图片预览组件

    ', this.preventTouchMove); } preventTouchMove = e => e.preventDefault(); // 阻止模态框上的touchMove事件影响到下方的元素...主要用到的事件如下: onPinch(e) 双指缩放触发,e.zoom为缩放倍数 onMultipointStart(e) 多点触摸触发 onPressMove(e) 手指按下并移动触发,e.deltaX...需要注意的是这里的zoom是相对于每一次缩放手势开始的放大倍数,因此需要监听onMultipointStart事件开始缩放记录下原始的scale值。...提前加载前后两张图片,并在onPressMove同步更改左右两张图片的位置,那么当前图片的左右两侧有空隙,前后的图片就可以显示出来。...另外,现在的做法预加载了当前图片前后的两张图片,可以考虑增加更多的图片预加载,使得切换更加流畅。

    1.5K11

    原生JS实现移动端滑动反弹

    移动端 Touch事件可以细分成三种,分别是: touchstart、 touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听。...三种返回对象的区别 其实这三种返回的对象,都是表示用户触摸事件的手指信息,之所以是一个伪数组,是因为有可能出现多指同时触摸,但是实际工作中一般不去考虑多指的情况。...而它们唯一的区别就是 touchstart和 touchmove事件的时候, changedTouches、 targetTouches、 touches都能获取到手指的信息,但是 touchend...1、新增 touchend事件事件里同样的可以获取到本次滑动的距离,将它与上一次的距离相加,赋值给一个全局变量; 2、 touchmove事件里有点小改动,就是在给 ul设置偏移值的时候,除了本次滑动的差值还要加上这个上一次的值...touchend事件的时候,给列表添加了 transition属性才会有反弹的效果,但是,下一次滑动的时候, touchmove事件的时候,这个属性还存在,所以就会出现滑动的时候有顿挫感,所以 touchmove

    10.4K20

    「移动端」touch事件,touchEvent对象

    一、touch事件类型 touchstart - 手指触摸屏幕,元素上按下触发 touchmove - 手指移动,元素上按下之后屏幕上任意移动 tounchend - 手指在元素上按下之后,屏幕任意位置抬起触发...touch:事件只能在移动端使用,mouse :事件只能在 PC 端使用。 touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以屏幕的任意位置执行。...touchmove、touchend 只能在 touchstart 触发后,才能执行。但是 mousemove 只要鼠标绑定元素上,不按下也能执行。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了pc端运行的时候,没有触摸设备可以使用鼠标代替。...如果可以支持触摸事件,则把鼠标事件使用event.preventDefault()阻止事件发生,此时鼠标事件将失效。如果鼠标和触摸事件都支持,还有添加多个触摸事件,具体的执行顺序是怎么的?

    1K30
    领券