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

Question

我有一个Div，其中有一个文本输入，如下所示：

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

我已经通过JQuery为Div鼠标悬停事件和mouseout事件分配了一个功能。 但是当我将鼠标移到文本输入上时，它会调用mouseout事件，而它在DIV中。

如何解决这个问题呢？ 我应该将活动发送给家长吗？ 怎么样？

Answer 1

使用jQuery .hover()方法而不是绑定mouseover和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
});

现场测试案例 。

.hover()实际上绑定了mouseenter和mouseleave事件，这些都是您正在寻找的事件。

Answer 2

我建议您使用.hover()而不是.mouseover()和.mouseout()这里是一个实时工作示例http://jsfiddle.net/DeUQY/

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

);

Answer 3

您需要使用几个步骤来完成这项工作。

首先，创建父hover函数，它们将是enter()和exit() 。 这些是使用hover()函数设置的。 然后创建儿童enterChild()和exitChild()函数。 孩子们只需更换一个标志，让您知道孩子是否正在盘旋，因此父母仍然被认为是徘徊。

无论你想在exit()函数中做什么，你都不能立即这样做，因为事件按照GUI的正确顺序到达，但这个特定情况的顺序错误：

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

因此，当您exit()函数被调用，你可能会后立即进入孩子，如果你希望当两个家长和孩子都退出，只是作用于处理一些exit()一定是错的。 请注意，浏览器的编写方式是，如果发生enter事件，则始终会发生退出事件。 唯一的例外可能是，如果您关闭选项卡/窗口，在这种情况下，它们可能会放弃发送更多事件。

因此，在parent exit()函数中，我们使用setTimeout()调用来进行异步调用，这将在子进程的enter()函数发生之后发生。 这意味着我们可以在那里设置一个标志并在异步函数中测试它。

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