在原型中悬停子元素时失去对父元素的关注答案

【问题标题】：Losing focus on parent element when hovering child element in prototype在原型中悬停子元素时失去对父元素的关注
【发布时间】：2009-07-15 16:29:30
【问题描述】：

我有一个 div，当我将鼠标悬停在它上面时，我有一个要设置动画的子 div（另一个 div），但是当我将鼠标悬停在子 div 上时，父 div 失去焦点并且子元素开始动画，就像我离开一样父 div。

这是我正在使用的代码：

$$(".slide .item").each(function (element) {
    element.observe('mouseover', function (event) {
        element.writeAttribute('doing_animation', 'true');
        element.down('.meta').morph('margin: 103px 0 0;', {
            duration: 0.25,
            afterFinish: function (event) {
                element.writeAttribute('doing_animation', 'false');
            }
        });
    });
    element.observe('mouseout', function (event) {
        setTimeout(function () {
            element.down('.meta').morph('margin: 169px 0 0;', {
                duration: 0.25
            });
        }, 250);
    });
});

这里是标记：

<div class="item">
    <div class="meta">
        <h3><a href="#">Space Kitty Needz Moar Balls</a></h3>
        <ul>
            <li>From: <a href="#">Jeffdoe</a></li>
            <li>Posted: 20 minutes ago</li>
            <li>Views: 249,209</li>
        </ul>
    </div>
    <img src="images/tmp/kitty.png" alt="" />
</div>

所以对于代码，我想悬停.item 或.item .meta 并且.meta div 仍将控制.item div 的焦点。我知道 jQuery 在这方面做得更好，但我需要使用 Prototype。

谢谢！

【问题讨论】：

我知道你说过你需要使用prototype而不是jQuery，但以防万一你不知道，只要你使用jQuery.noConflict()就可以在一个页面上同时使用它们，这会将$ 函数返回给prototype.js（只留下jQuery 函数暴露）。
我不想为这件事加载完整的 jQuery 库，所以我继续将我的所有代码迁移到 Rails 项目上的 jQuery。虽然我之前遇到过很多次这个问题，所以我仍然很好奇如何使用 Prototype 来做到这一点。

标签： javascript css prototypejs

【解决方案1】：

我会这样做：

$$(".slide .item").each(function (element) {
    element.observe('mouseover', function (event) {
        var relatedTarget = $(event.relatedTarget || event.fromElement);
        var target = Event.element(event);
        if ((target == element || Element.descendantOf(target, element))
            && !((relatedTarget == element) || Element.descendantOf(relatedTarget, element)))
        {
            element.writeAttribute('doing_animation', 'true');
            element.down('.meta').morph('margin: 103px 0 0;', {
                duration: 0.25,
                afterFinish: function (event) {
                    element.writeAttribute('doing_animation', 'false'); 
                }
            });
        }
    });
    element.observe('mouseout', function (event) {
        var relatedTarget = $(event.relatedTarget || event.fromElement);
        var target = Event.element(event);
        if ((target == element || Element.descendantOf(target, element))
            && !((relatedTarget == element) || Element.descendantOf(relatedTarget, element)))
        {
            setTimeout(function () {
                element.down('.meta').morph('margin: 169px 0 0;', {
                    duration: 0.25
                });
            }, 250);
        }
    });
});

你可以看到我刚刚添加了一个包装器

    var relatedTarget = $(event.relatedTarget || event.fromElement);
    var target = Event.element(event);
    if ((target == element || Element.descendantOf(target, element))
        && !((relatedTarget == element) || Element.descendantOf(relatedTarget, element)))
    {
        ...
    }

围绕您的事件处理程序。因此，如果我们真的要移入或移出父容器，则仅将其视为“真正的”鼠标移入或移出。

希望对您有所帮助。

【讨论】：

【解决方案2】：

最简单的解决方案可能是将mouseover 侦听器添加到.item. 子级并清除其中的mouseout 超时。下面的代码仅用于说明 - 它未经测试，当然，变量应该有适当的范围：

var timeout = null;

$$(".slide .item").each(function (element) {
    element.observe('mouseout', function (event) {
        timeout = setTimeout(function () {
            ...
        }, 250);
    });

    element.descendants().each(function (nested) { 
        nested.observe('mouseover', function (nestedEvent) {
            if (timeout) clearTimeout(timeout);
        });
    });
});

【讨论】：