javascript - mouseout 事件的问题

Question

我正在使用 JavaScript 来隐藏图像并显示隐藏在图像下的一些文本。但是，当您滚动显示文本时，它会在容器上触发 mouseout 事件，然后隐藏文本并再次显示图像，然后它就进入了一个奇怪的循环。

html 看起来像这样:

<div onmouseover="jsHoverIn('1')"
     onmouseout="jsHoverOut('1')">
    <div id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

和 javascript(它使用 scriptaculous):

function jsHoverIn(id) {
  if(!visible[id]) {
    new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
    visible[id] = true;
  }
}
function jsHoverOut (id) {
  var scope = Effect.Queues.get(id);
  scope.each(function(effect) { effect.cancel(); });

  new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
  new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
  visible[id] = false;
}

这看起来很简单，但我就是想不通。

Answer 1

我会给容器 div:

position: relative;

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

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

并在这个 div 上捕获 mouseover 和 mouseout 事件。

因为它没有子元素，所以您不应该向它传播虚假的鼠标悬停和鼠标移出事件。

编辑:

我认为发生的情况是，当光标从父元素移动到子元素时，父元素上会发生 mouseout 事件，而子元素上会发生 mouseover 事件。但是，如果子元素上的鼠标悬停处理程序未捕获事件并停止传播，则父元素也将接收到鼠标悬停事件。