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

滚动事件导致自定义事件触发两次(应为一次)

滚动事件导致自定义事件触发两次的问题可能是由于事件绑定的方式或者事件冒泡导致的。下面是一些可能的原因和解决方法:

  1. 事件绑定方式不正确:确保只绑定一次事件。可以使用addEventListener方法来绑定事件,而不是直接在HTML标签中使用onscroll属性。例如:
代码语言:javascript
复制
window.addEventListener('scroll', function(event) {
  // 处理滚动事件的代码
});
  1. 事件冒泡:滚动事件可能会冒泡到父元素或者祖先元素上,导致事件触发多次。可以使用event.stopPropagation()方法来阻止事件冒泡。例如:
代码语言:javascript
复制
window.addEventListener('scroll', function(event) {
  event.stopPropagation();
  // 处理滚动事件的代码
});
  1. 频繁触发滚动事件:滚动事件可能会在短时间内频繁触发,导致多次触发自定义事件。可以使用节流或者防抖的方式来控制事件的触发频率。例如,使用lodash库的throttle方法:
代码语言:javascript
复制
var throttledScroll = _.throttle(function() {
  // 处理滚动事件的代码
}, 200); // 限制每200毫秒触发一次事件

window.addEventListener('scroll', throttledScroll);

以上是一些可能的解决方法,具体取决于具体的代码实现和使用的框架。如果问题仍然存在,可能需要进一步检查代码逻辑或者提供更多的上下文信息来进行排查。

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

相关·内容

代码触发,手动触发touchstart事件,touch事件,click事件自定义事件

工作中有时候会用到需要用代码去手动触发某个事件或者是自定义事件,通常触发click事件的做法为eleme.click(),遇到touchstart就行不通了。...可以使用以下方式 // 创建事件. var event = document.createEvent('Events'); // 初始化一个点击事件,可以冒泡,无法被取消 event.initEvent...e.target 就是监听事件目标元素 }, false); // 触发事件监听 elem.dispatchEvent(event); initEvent已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它...new Event('touchstart'); //监听 elem.addEventListener('touchstart', function (e) { ... }, false); // 触发...event. elem.dispatchEvent(event); Event构造函数也可以使用自定义事件 var event = new Event('CustomEvent'); //监听 elem.addEventListener

4.8K30
  • 让 touch 系列事件触发滚动响应更快

    1写在前面 我们都知道,对于移动端的网页而言,滚动是十分重要的交互。 然而 touch 系列事件触发滚动后)经常会引发严重的性能问题。...在极个别例子下,这会导致意外的滚动。可以通过在意外滚动发生的元素上添加CSS属性touch-action: none 来阻止滚动发生。继续阅读,你可以了解到更多相关技术的细节。...下图展示了用户触发滚动后到真正滚动期间,耗时最长的前百分之一案例中所耗费的时间。这些数据是由安卓上的 Chrome 访问任意网页后采集的。...4问题与修复 大部分情况下,(我们的优化)不会导致任何 BUG 。但是如果 BUG 真的出现了,最常见问题是当你不希望页面发生滚动时却发生了。...极个别的例子是,开发者发现(如果不在touchend事件处理函数中调用preventDefault()) click 事件触发了。

    97220

    iScroll click事件触发两次的解决方案

    iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。...而在实际操作中,先执行了touchend,然后再执行了一次onclick的相关函数。这样就形成了头疼的一次点击两次触发!...网上有很多代码说解决“iScroll click事件”点击一次触发两次,我也是按着各位大神的步骤写的,但是依旧不成功,也可能是操作不对,我附上我的执行操作的代码,我的已经成功。...解决方案1:点击事件使用Zepto的 tap ,进行解决。 解决方案2:在iscroll搜索that.doubleTapTimer将其注释掉 或者 直接注释以下557-573行即可!...appendChild(bar); that[dir + 'ScrollbarIndicator'] = bar; */ /*去除滚动

    1.3K20

    jQuery scroll()方法:页面滚动到一定位置触发事件返回顶部

    说在前面: 在日常工作中难免会遇到一些滚动事件的应用,页面滚动到一定位置显示 返回顶部 按钮,header 头部 fixed 固定等,这时候就可以使用 scroll() 方法来实现我们的需求。...定义和用法 当用户滚动指定的元素时,会发生 scroll 事件。该事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。...scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。...语法: $(selector).scroll() 应用: 我们监听滚动事件,放滚动到 400px 时,出发显示返回顶部标签,然后给该标签,绑定一个事件,点击返回顶部。...function() {         $(window).scroll(function() {             var scroHei = $(window).scrollTop();//滚动的高度

    6.4K30

    记录一次Mysql死锁事件(由Insert与uniqueKey导致

    | 导语记录一次于2023年01月23日遇到的死锁问题。...比如将事务隔离改为RC或修改系统变量(innodb_locks_unsafe_for_binlog),这样能够在搜索和索引扫描禁用掉间隙锁GapLock;But,在外键约束和唯一键时会触发使用。...、license_hash、license_source) 3、死锁快照 从腾讯云给的结论看,死锁原因是TX1(已经持有了Next_key锁)和TX2(申请某个记录锁),两者出现了锁等待,进而导致...只有申请成功了才能正确写入数据 3.1.3 死锁原因 死锁原因一目了然 事务B因为在申请锁的路上,所以在本事务结束之前,是不会把已经持有S锁释放掉的; 事务A则因为申请了事务B执行路上,用GapLock赋予了周围记录S锁,导致自己申请周围记录

    67020

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

    做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。...之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发。...后来突然脑袋灵光一闪,既然在touchstart中加了event.preventDefault会导致触发click事件,那我在touchmove中加可以吧?...所以页面无法滚动了,之后又去找找找,找了很久一直没找到怎么解决这个问题,突然想起之后用的一个移动端的图片轮播插件, 为什么他们可以左右滑动,不影响click事件和a标签,也不影响页面的滚动。...然后测试一下,QQ和微信中特效没有问题,click事件和a标签链接也可以顺利触发,页面滚动也没有问题。 所有问题终于解决了。。

    3.3K20

    Chrome 89 更新事件触发顺序,导致99%的文章都错了(包括MDN)

    id=174288 中,有人指出,在 webkit 中当前的事件模型,会导致含有 Shadow DOM 的情况下,子元素的捕获事件会优先于父元素的捕获事件触发。 ?...而在旧模型中,一旦达到 AT_TARGET ,所有注册的监听器就将按照顺序被触发,而不管他们是否被标记为捕获。由于 Shadow DOM 会创建多个 targets ,导致事件执行顺序的错误。...1.按照旧版本事件触发机制 表现 目标元素触发事件顺序和注册事件顺序有关 2.新的的事件触发机制 表现 目标元素触发事件顺序按照先捕获再冒泡的顺序触发 而这个版本分界线是在 Chrome 89.0.4363.0...在 Chrome 89.0.4363.0 以及之后版本中,目标元素的触发事件顺序不再按照注册顺序触发!而是按照先捕获再冒泡的形式依次执行! 然后我们再来看看这样修改会给我们带来怎么样的影响。...如果我们业务中有依赖相关的事件触发顺序,请仔细检查! 举个?

    56450

    【前沿】来自宇宙深处的礼物:两次确凿、一次疑似引力波事件

    ►GW151226事件的显著性分析。可以看到本事件的显著性大于5倍标准差,所以这是一次确定无误的科学发现。...(此图版权为LSC/Virgo Collaboration所有) |两次确凿、一次疑似引力波事件 除了上面两个引力波事件之外,在去年的10月12日,LSC的科学家们还发现了一次疑似引力波事件:LVT151012...►LIGO发现的两次引力波事件一次疑似事件的参数对比。 第一,请注意事件的信噪比、光度距离还有双黑洞的质量。...尽管如此,GW151226的显著性还是大于5倍标准差,可认为是一次新的引力波时间探测。而LVT151012由于距离比较远,信噪比和显著性都比较低,只能当做一次疑似引力波事件。...第一次事件可以称为“发现”,第二次事件可以说是“统计”,但是三次便可以做“分布”了!根据这三个事件的观测数据,我们对双黑洞并合率的估计为:每年在每立方Gpc的空间内有9-240次黑洞并合。

    61970

    @antvg6自定义节点dom类型shape无法触发事件原因分析

    版本 @antv/g6: 4.8.10 踩坑 根据官网文档注册自定义节点时如果绘制dom类型shape,会发现node相关事件全都无法触发,比如node:click等 例如: G6.registerNode...true, }); return keyShape; } }); 原因分析 g6只有svg渲染模式画布可以支持dom类型节点,原理是通过foreignObject标签渲染dom 在事件触发时...canvas会对比svg dom拾取的对象和shape对应的标签确定触发哪个节点的事件 @antv/g-svg/src/canvas.ts // 覆盖 Container 中通过遍历的方式获取 shape...@antv/g-base/src/event/event-controller.ts // 触发事件 _triggerEvent(type, ev) { const pointInfo..._emitEvent(type, ev, pointInfo, preShape, preShape, null); // 先触发图形的事件 } this.

    2.4K20

    uni-app中使用scroll-view滚到底部时多次触发scrolltolower

    事件 scroll-top Number 设置竖向滚动条位置 scroll-left Number 设置横向滚动条位置 scroll-into-view String 值应为某子元素id(...@scrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件 @scrolltolower EventHandle 滚动到底部/右边,会触发...但是如使用scroll-view导致页面级没有滚动,则触底事件不会被触发,所以这里存在的问题是有时候无法触发onReachBottom。   ...第一个问题就是当滚动滚动到底部时会多次触发scrolltolower事件,第二个问题是当页面由第一个scroll-view(该页面已经到了的最底部了)切换到第二个scroll-view时会自动滚动到页面的最底部...切换到第二个scroll-view时会自动滚动到页面的最底部:   设置一个scrollTop设置竖向滚动条的位置,首先默认为0,当页面向下滚动触发scroll-top事件从而改变scrollTop的值

    8.5K10

    JS高级测试: 下列函数节流说法不正确的是?

    考核内容:JAVASCRIPT定时器与事件 的使用 题发散度: ★★★ 试题难度: ★★★ 解题思路: 为什么要函数节流 由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃...文字输入、自动完成的keyup事件 再详细点: 我们定义了一个鼠标滚动事件 : 我们的本意只是让鼠标滚动一次执行一次滚动函数,但是window的onscroll函数并不是等scroll结束之后才会调用...,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的浏览器也会陷入假死状态。...,触发 handlerif (curTime - startTime >= time) {method.apply(context, args);startTime = curTime; // 没达到触发间隔...,重新设定定时器} else {timeout = setTimeout(method, delay);}}; 函数中,当一次时间较长的时候还是会执行两次,而不是等滚动停止之后再执行。

    1.1K10

    自定义工具函数库(一) 函数相关

    而且在调用 bind时可以传参,调用返回的函数也可以传参,只是如果传两次参数,则只有第一次的参数会起作用 // bind函数封装实现 function bind(fn, obj, ...args1) {...return function (...args2) { return fn.call(obj, ...args1, ...args2); // 如果传两次参数,则只有第一次的参数会起作用...一些浏览器事件如 window.onresize、 window.mousedown等,触发频率高,会造成界面卡顿 向后台发送请求,频繁触发的话,对服务器会造成不必要的麻烦 解决方案:通过函数节流和函数防抖限制事件处理函数的频繁调用...适合多次时间按时间平均分配触发 场景: resize 事件(窗口调整) scroll 事件(页面滚动) mousemove 事件(拖拽功能) click 事件(疯狂点击点击) 语法: throttle...,该函数会从上一次触发后,延迟 wait毫秒后调用 callback 如果触发一次,还没过 wait毫秒,再次触发,那么又得重新计时,依此类推,直到延迟 wait毫秒后才调用 callback(即频繁触发

    51220
    领券