Потеря фокуса на родительском элементе при наведении на дочерний элемент в прототипе

Question

У меня есть 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, и div .meta по-прежнему будет управлять фокусом div .item. Я знаю, что jQuery справляется с этим лучше, но мне нужно использовать Prototype.

Спасибо!

Answer 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)))
    {
        ...
    }

вокруг ваших обработчиков событий. Поэтому считайте его «реальной» мышью или мышью, если мы действительно перемещаемся в родительский контейнер или из него.

Надеюсь, это поможет.

Answer 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);
        });
    });
});