javascript – mouseout事件的问题

前端之家收集整理的这篇文章主要介绍了javascript – mouseout事件的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 JavaScript来隐藏图像并显示隐藏在其下的一些文本.但是,当文本显示时,如果你滚动它,它会触发容器上的mouSEOut事件,然后隐藏文本并再次显示图像,它只是进入一个奇怪的循环.

html看起来像这样:

  1. <div onmouSEOver="jsHoverIn('1')"
  2. onmouSEOut="jsHoverOut('1')">
  3. <div id="image1" />
  4. <div id="text1" style="display: none;">
  5. <p>some content</p>
  6. <p>some more content</p>
  7. </div>
  8. </div>

和javascript(它使用scriptaculous):

  1. function jsHoverIn(id) {
  2. if(!visible[id]) {
  3. new Effect.Fade ("image" + id,{queue: { position: 'end',scope: id } });
  4. new Effect.Appear ("text" + id,scope: id } });
  5. visible[id] = true;
  6. }
  7. }
  8. function jsHoverOut (id) {
  9. var scope = Effect.Queues.get(id);
  10. scope.each(function(effect) { effect.cancel(); });
  11.  
  12. new Effect.Fade ("text" + id,scope: id } });
  13. new Effect.Appear ("image" + id,scope: id } });
  14. visible[id] = false;
  15. }

这看起来很简单,但我无法绕过它.

解决方法

我给容器div:
  1. position: relative;

并在容器中添加第三个div(应该是容器的最后一个子节点):

  1. position: absolute;
  2. top: 0;
  3. bottom: 0;
  4. left: 0;
  5. right: 0;

并在此div上捕获mouSEOver和mouSEOut事件.

因为它没有子元素,所以不应该将虚假鼠标悬停和mouSEOut事件传播给它.

编辑:

我认为发生的是,当光标从父元素移动到子元素时,父元素上发生mouSEOut事件,并且子元素上发生鼠标悬停事件.但是,如果子元素上的mouSEOver处理程序未捕获事件并停止传播,则父元素也将接收mouSEOver事件.

猜你在找的JavaScript相关文章