gpt4 book ai didi

javascript - 在特定时间段内停止收听悬停事件

转载 作者:行者123 更新时间:2023-11-30 17:08:24 24 4
gpt4 key购买 nike

我正在使用 fullpage.js (您可以在演示中看到 here )结合图像缩放(悬停)插件。

问题是,当我移动到整页的新幻灯片时,光标恰好(快速)在幻灯片动画期间经过图像,图像缩放有时会被激活,并且在动画停止后,放大的部分在我再次移动光标之前,图像(来自上一张幻灯片)仍然可见。

另外,我只有缩小版的缩放插件,所以无法从那里解决这个问题,但是,fullpage.js 提供了各种回调,所以也许一种解决方案是“卡住”监听悬停事件的时间随着动画的持续?有办法做到这一点吗?

最佳答案

我可以想到两个快速选项:

  1. 您可以在 <body> 上设置 CSS“pointer-events: none”当整页切换到新幻灯片时,在幻灯片转换完成后删除该样式。但是,这不适用于 IE10 或更低版本。
  2. 您可以在 body 中有一个绝对定位的空 div,它以 z-index 覆盖整个 View ,高于其他所有内容。将 mousemove/mouseover/mouseout 事件监听器附加到该 div,并让这些监听器在收到的任何事件上 cancelbubble 和 preventDefault。这将导致该 div 吃掉任何可能导致悬停的鼠标事件。保持该 div display:none 直到出现幻灯片过渡。设置 display:block on slide transition。

关于javascript - 在特定时间段内停止收听悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27514214/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com