鼠标事件的问题 [英] Problems with mouseout event

问题描述

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

I'm using JavaScript to hide an image and show some text thats hidden under it. But, when the text is shown if you scroll over it, it fires the mouseout event on the container, that then hides the text and shows the image again, and it just goes into a weird loop.

html看起来像这样：

The html looks like this:

<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）：

And the javascript (It uses 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;
}

这看起来真的很简单，但我只是不能把我的头围绕起来。 / p>

This seems really simple, but i just cant wrap my head around it.

推荐答案

我会给容器div：

position: relative;

并在容器中添加第三个div（应该是容器的最后一个子代），其中： / p>

and add a third div in the container (should be the last child of the container) with:

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

，并抓住该div上的鼠标悬停和mouseout事件。

and catch the mouseover and mouseout events on this div instead.

因为它没有子元素，所以你不应该传播恶意的鼠标悬停和鼠标悬停事件。

Because it has no child elements, you shouldn't get spurious mouseover and mouseout events propagating to it.

编辑：

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

What I believe happens, is that when the cursor moves from a parent element onto a child element, a mouseout event occurs on the parent element, and a mouseover event occurs on the child element. However, if the mouseover handler on the child element does not catch the event and stop it propagating, the parent element will also receive the mouseover event.

这篇关于鼠标事件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！