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