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

Live test case

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

Answer 2

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

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

);

Answer 3

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

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

无论您想在exit()函数中执行什么操作，都无法立即执行此操作，因为事件以GUI的正确顺序到达，但此特定情况的顺序错误：

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

因此，当您的exit()函数被调用时，您可能正在进入该孩子，如果您想要在两者退出父母和孩子时处理某些事情， exit()肯定是错的。请注意，浏览器的编写方式是，如果发生enter事件，则始终会发生退出事件。唯一的例外是，如果您关闭标签/窗口，在这种情况下，它们可能会放弃发送更多事件。

因此，在父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_()
};

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

3 个答案: