javascript - How to send mouseover event to parent div? - Stack Overflow

admin管理员组

文章数量:1313121

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?

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?

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Sep 15, 2022 at 11:52 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 4, 2011 at 7:38 SaeedSaeed 7,3701414 gold badges4646 silver badges6666 bronze badges 3

• 2 Simply bind mouseenter and mouseleave instead. By the way, you better specify the input type don't let the browser decide. – Shadow Wizzard Commented Sep 4, 2011 at 7:40
• would you please explain it more (with an example of code) in form of an answer – Saeed Commented Sep 4, 2011 at 7:42
• I solved the problem with your help, but please post it in form of an answer, so I can accept your answer – Saeed Commented Sep 4, 2011 at 7:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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.

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

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

);

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_()
};

本文标签： javascriptHow to send mouseover event to parent divStack Overflow