如何将mouseover事件发送到父div？

Question

I have a Div in which there is a text input, like this:

<div id="parentDive" class="parent">
<input id="textbox"></input>
</div>

I have assigned a functionality to the Div mouseover event and mouseout event by means of JQuery. But when I move my mouse over the text input, it calls mouseout event, while it's in the DIV.

How to solve this problem? Should I send the event to the parent? how?

Answer 1

Use the jQuery .hover() method instead of binding mouseover and mouseout :

$("#parentDive").hover(function() {
    //mouse over parent div
}, function() {
    //mouse out of parent div
});

$("#textbox").hover(function() {
    //mouse over textbox
}, function() {
    //mouse out of textbox
});

Live test case .

The .hover() is actually binding the mouseenter and mouseleave events, which are what you were looking for.

Answer 2

I suggest to you to use .hover() not .mouseover() and .mouseout() here is a live working example http://jsfiddle.net/DeUQY/

$('.parent').hover(function(){
    alert('mouseenter');
},function(){
    alert('mouseleave');
}

);

Answer 3

You need to use a few steps to make that work.

First, create the parent hover functions which would be enter() and exit() . These are setup using the hover() function. Then create the children enterChild() and exitChild() function. The children just change a flag that allows you to know whether a child is being hovered and thus the parent is still being considered to be hovered.

Whatever you want to do in the exit() function, you cannot do it immediately because the events arrive in the correct order for a GUI, but the wrong order for this specific case:

enter parent
exit parent
enter child
exit child
enter parent
exit parent

So when your exit() function gets called, you may be entering the child right after and if you want to process something when both the parent and child are exited, just acting on the exit() will surely be wrong. Note that the browser is written in such a way that an exit event always happens if an enter event happened. The only exception may be if you close the tab/window in which case they may forfeit sending more events.

So, in the parent exit() function we make use of a setTimeout() call to make an asynchronous call which will happen after the enter() function of a child happens. This means we can set a flag there and test it in the asynchronous function.

MyNamespace = {};

MyNamespace.MyObject = function()
{
    var that = this;

    // setup parent
    jQuery(".parentDiv").hover(
        function()
        {
            that.enter_();
        },
        function()
        {
            that.exit_();
        });

    // setup children
    jQuery(".parentDiv .children").hover(
        function()
        {
            that.enterChild_();
        },
        function()
        {
            that.exitChild_();
        });
}

// couple variable members
MyNamespace.MyObject.prototype.parentEntered_ = false;
MyNamespace.MyObject.prototype.inChild_ = false;

MyNamespace.MyObject.prototype.enter_ = function()
{
    // WARNING: if the user goes really fast, this event may not
    //          happen, in that case the childEnter_() calls us
    //          so we use a flag to make sure we enter only once
    if(!this.parentEntered_)
    {
        this.parentEntered_ = true;

        ... do what you want to do when entering (parent) ...
    }
};

// NO PROTOTYPE, this is a static function (no 'this' either)
MyNamespace.MyObject.realExit_ = function(that) // static
{
    if(!that.inChild_)
    {
         ... do what you want to do when exiting (parent) ...

         that.parentEntered_ = false;
    }
};

MyNamespace.MyObject.prototype.exit_ = function()
{
    // need a timeout because otherwise the enter of a child
    // does not have the time to change inChild_ as expected
    setTimeout(MyNamespace.MyObject.realExit_(this), 0);
};

// detect when a child is entered
MyNamespace.MyObject.prototype.enterChild_ = function()
{
    this.inChild_ = true;
    this.enter_(); // in case child may be entered directly
};

// detect when a child is exited
MyNamespace.MyObject.prototype.exitChild_ = function()
{
    this.inChild_ = false;

    // We cannot really do this, although in case the child
    // is "exited directly" you will never get the call to
    // the 'exit_()' function; I'll leave as an exercise for
    // you in case you want it (i.e. use another setTimeout()
    // but save the ID and clearTimeout() if exit_() is not
    // necessary...)
    //this.exit_()
};