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

时间:2014-12-16 21:27:03

标签: javascript event-handling image-zoom fullpage.js

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

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

另外,我只有一个缩小版本的缩放版本,所以无法从那里解决这个问题,但是,fullpage.js提供了各种回调,所以也许一个解决方案可能是"冻结"只要动画持续,就听悬停事件?有没有办法做到这一点?

1 个答案:

答案 0 :(得分:2)

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

  1. 您可以设置CSS&#34;指针事件:无&#34;在全页切换到新幻灯片时<body>上,然后在幻灯片切换完成后删除该样式。然而,这不会在IE10或更低版本上工作。
  2. 你可以在一个绝对定位的空div中覆盖整个视图,在z-index之上。将mousemove / mouseover / mouseout事件监听器连接到该div,并让这些监听器取消气泡并阻止它们收到的任何事件的默认值。这将导致该div吃任何可能导致悬停的鼠标事件。保持div显示:在幻灯片转换之前无。设置显示:滑动过渡时阻止。