Ошибка JavaScript mouseover/mouseout с дочерним элементом

У меня есть эта небольшая проблема, и я прошу вас о помощи. У меня есть элемент div, внутри которого у меня есть элемент img, например

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="button.png" style="visibility: hidden" />
</div>

<script type="text/javascript">
    function MyFuncHover() {
        // Here I have some code that makes the "child" visible
    }

    function MyFuncOut() {
        // Here I have some code that makes the "child" invisible again
    }
</script>

Как вы видите, изображение является дочерним элементом div. Я хочу, чтобы только когда я покинул div, ребенок должен исчезнуть. Тем не менее, похоже, что когда я перемещаю мышь над изображением, вызывается функция MyFuncOut() (потому что, я полагаю, я оставляю div, наводимая на изображение). Я не хочу, чтобы это произошло. Я хочу, чтобы функция MyFuncOut() вызывалась только тогда, когда я покидал область div.

Я не знал, что когда вы наводите указатель мыши на дочерний элемент управления, он родитель вызывает событие mouseout (даже если я над ребенком, я все равно над родителем). Я попал в ловушку, и мне нужно немного вашего хорошего совета. Спасибо!

ИЗМЕНЕНИЯ

O.K. Событие bubbling не отправит событие "mouseout" родительскому элементу, когда я "вытаскиваю" дочерний элемент. Он также не отправит событие "mouseover" родительскому элементу, когда я "навешиваю" на ребенка. Это не то, что мне нужно. Мне нужно, чтобы "mouseout" событие родителя не отправлялось, когда я "навешиваю" на ребенка. Возьми? Событие барботажа полезно, когда я не хочу, например, событие click для дочернего объекта, которое будет распространено на родителя, но это не мое дело. Что странно, так это то, что у меня есть другие элементы внутри одного и того же родителя, которые не запускают событие "mouseout" родителя, когда я "навешиваю на них" их.

Ответ 1

вы можете использовать события "mouseenter" и "mouseleave", доступные в jquery, вот приведенный ниже код,

$(document).ready(function () {
        $("#parent").mouseenter(function () {
            $("#child").show();
        });
        $("#parent").mouseleave(function () {
            $("#child").hide();
        });
    });

выше - присоединить событие,

<div id="parent">
    <img id="child" src="button.png" style="display:none;" />
</div>

Ответ 2

Вы можете использовать нижеприведенное решение, которое было бы чистым javascript, и я использовал его с успехом.

var container = document.getElementById("container");
var mouse = {x: 0, y: 0};

function mouseTracking(e) {
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
    var containerRectangle = container.getBoundingClientRect();

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right &&
            mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) {
        // Mouse is inside container.
    } else {
        // Mouse is outside container.
    }
}
document.onmousemove = function () {
    if (document.addEventListener) {
        document.addEventListener('mousemove', function (e) {
            mouseTracking(e);
        }, false);
    } else if (document.attachEvent) {
        // For IE8 and earlier versions.
        mouseTracking(window.event);
    }
}

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

Ответ 3

Просто добавьте оператор if в вашу функцию MyFuncOut, которая проверяет, что цель не является изображением

if (event.target !== imageNode) {
     imageNode.style.display = 'none'
}

Ответ 4

У меня тоже были проблемы с этим, и я не смог заставить его работать. Это то, что я сделал вместо этого, и его намного проще и не является javascript, поэтому он быстрее и не может быть отключен.

div.container
{
opacity:0.0;
filter:alpha(opacity="00");
}

div.container:hover
{
opacity:1.0;
filter:alpha(opacity="100");
}

Вы даже можете добавить переход css3 для непрозрачности, чтобы придать ему более гладкий вид.