6

我正在使用 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;
}

这看起来很简单，但我就是无法理解它。

4

6 回答 6

5

我会给容器 div：

position: relative;

并在容器中添加第三个 div（应该是容器的最后一个子元素）：

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

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

因为它没有子元素，所以您不应该将虚假的 mouseover 和 mouseout 事件传播给它。

编辑：

我相信发生的是，当光标从父元素移动到子元素时，父元素上会发生 mouseout 事件，子元素上会发生 mouseover 事件。但是，如果子元素上的 mouseover 处理程序没有捕获事件并停止传播，则父元素也会收到 mouseover 事件。

于 2008-09-08T13:20:28.900 回答
4

听起来您真正想要的是mouseenter/ mouseleave（IE专有事件，但易于模拟）：

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

或者，修补prototype.js并放心使用。请注意，我已经扩展了离开窗口或进入 XUL chrome 的检查；这似乎为我修复了 Firefox 中的一些边缘情况。mouseentermouseleave

于 2008-10-13T06:22:52.127 回答
0

onmouseover 事件不应该在图像 div 上，而 onmouseout 事件不应该在文本 div 上吗？

于 2008-09-08T13:12:49.870 回答
0

我不确定这是否适合您的其余样式，但也许如果您更改文本 div 上的 css 使其与图像大小相同，或者固定外部 div 的大小，那么当鼠标悬停时事件触发时，外部 div 的大小不会发生太大变化而不会导致 mouseout 事件。

这有意义吗？

于 2008-09-08T13:23:48.097 回答
-1

这可能不是最好的解决方案，但您可以设置一个全局布尔变量，这两种方法都可以访问该变量，该变量仅指定最后一个操作是 HoverIn 还是 HoverOut。您可以使用此布尔变量来确定代码是否应该运行。

if (bWasHoverIn){
   ...
}
于 2008-09-08T12:58:54.083 回答
-1

尝试使用 onmouseenter 代替 onmouseover 和 onmouseleave 代替 onmouseout。

于 2019-07-30T03:25:33.873 回答