当容器有选择框时，jQuery mouseleave触发的问题

问题描述

我有两个容器 - 一个嵌套在另一个容器内。当我将鼠标悬停在父级上方时，我希望显示子容器。当我使用mouseout时，我想让子容器淡出。我遇到的问题是子容器有一个包含选择框的表单。当用户选择选择框时 - 意外触发了mouseleave事件。

I have a two containers -- one is nested inside of another. When I hover over the parent, I want the child container to appear. When I mouseout, I want the child container to fadeout. The problem I'm having is the child container has a form that contains a "select box". When the user selects the select box -- the mouseleave event is accidentally fired.

如何阻止选择框绊倒mouseleave事件？

How can I stop the select box from tripping the mouseleave event?

你可以在这里看到我的工作代码：

You can see my working code here: http://jsfiddle.net/rsturim/9TZyh/3/

以下是我的脚本摘要：

$('#parent-container').live("mouseenter", function () {
    var $this = $(this),
    $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().fadeTo('slow', 1.0);
}).live("mouseleave", function (e) {
    var $this = $(this),
    $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().hide();              
});

编辑：在基于WebKit的浏览器中显示正常。在Firefox和IE7-IE9中失败。

edit: appears fine in WebKit-based browsers. Fails in Firefox and IE7-IE9.

推荐答案

由于mouseleave和mouseenter事件是非标准的，你可以在这里和那里得到这样的滞后。我可以建议解决的唯一方法是使用一些黑客。这是改进版的代码。

Since mouseleave and mouseenter events are non-standard you can get such lags here and there. The only method I can suggest to fix that is using some hacks. Here is http://jsfiddle.net/mPDcu/1/ improved version of you code.

var selectOpened = false;
$('#select-grind-type').click(function(e){
    selectOpened = !selectOpened;
    e.stopPropagation();
});
$('body').click(function(){
    if (selectOpened) {
        selectOpened = false;
    }
})
$('#parent-container').on("mouseenter", function() {
    var $this = $(this),
        $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().fadeTo('slow', 1.0);
}).live("mouseleave", function(e) {
    if (!selectOpened) {
        var $this = $(this),
            $selectOptionsContainer = $this.find('#child-container');
        $selectOptionsContainer.stop().hide();   
    }
});

这篇关于当容器有选择框时，jQuery mouseleave触发的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！