onmouseout fires inside the element it's set to

问题

I am currently switching the menu of my site from pure JavaScript to jQuery. My menu has a rollout / rollin effect.

The menu has an outer wrapper which has an onmouseout event set. If this fires, the relatedTarget is checked whether it's a child of the outer wrapper. If not, the rollin shall happen.

What happens right now is, that if the mouse is moved from the menu's inner wrapper (this is to center the actual menu) to the menu's outer wrapper, the onmouseout fires. There seems to be a tiny part which doesn't belong to the menuOuterWrapper.

The site isn't online right now, so I've prepared a Fiddle here. You will see the problem if you move your mouse from the gray area above the handle to the left or right dark area. The menu will roll in and then immediately out again. The rollin shall only occur when the mouse is moved out of the outer wrapper, i.e. under the dark gray area (or the light gray handle area). To see the dark gray areas, you might have to increase the width of the result block. [EDIT: I reduced the width of inner to 600px, so the dark side areas should be visible by default now.]

SO tells me that I shall include code when linking to JSFiddle. I don't want to break the rules but I'll be honest: I'm clueless where the problem comes from. My best idea is that I made a mistake in my isChildOf implementation, so I'll give you this:

jQuery.fn.isChildOf = function (parentId) {
    if ($(this).parents("#" + parentId).length > 0) {
      return true;
    } else {
      return false;
    }
};

$('#outer').on('mouseout', function(event) {
    if (!$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

Although this is a minimal example, I did nearly the same with pure JS, where it worked fine. So I guess it's something in the jQuery part. Since these are my first steps with jQuery, it is even more likely.

Every help you can provide is highly appreciated :)

[UPDATE]

I got it working now. The problem was that I didn't check for the relatedTarget to be "outer" itself. So when the mouse leaves the content div and enters the outer div, mouseout fires and of course, outer is no child of itself. So I amended it to

$('#outer').on('mouseout', function(event) {
    if (!(event.relatedTarget.id == "outer") &&    
        !$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

and that fixed the problem.

回答1:

if i understood your question right.

This might help

$('#inner').on('mouseover', function() {
        mouseIsOverMenu = true;
        setTimeout(menu_rollout, 500);
    });

    $('#inner').on('mouseout', function(event) {
        if (!$(event.relatedTarget).isChildOf("outer")) {
            mouseIsOverMenu = false;
            menu_rollin();
        }
    });

What i did is i have changed the id of #outer to #inner.

回答2:

This is a dirty hack, but your problem seems to be with the mouseout function applying too frequently, and what functionality you really want is capturing the mouse leaving the bottom of the menu/content.

Here's some code that will do just that.

$('#outer').on('mouseout', function(event) {
    if(event.clientY >= document.getElementById('outer').offsetHeight){
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

here's the associated jsFiddle

来源：https://stackoverflow.com/questions/20682730/onmouseout-fires-inside-the-element-its-set-to

标签

javascript

jquery

css

onmouseout