jQuery悬停在子元素上隐藏

Question

实时示例 ： http ： //jsbin.com/axaqoc/2

当我尝试选择子选择框时，下拉菜单隐藏起来，以为鼠标离开了父元素。

js代码：（完整代码： http ： //pastie.org/2624436 ）

$('.dropOption').hover(function(e) {
        e.stopPropagation();
        $(this).trigger('dropOption', 'show'); // show the parent element
        return false;
    },function(e) {
        e.stopPropagation();
        $(this).trigger('dropOption', 'hide'); // hide the parent on mouse out
        return false;
    });

如何停止选择下拉菜单中的冒泡？ （顺便说一句，这在chrome上可以正常使用，但在任何其他浏览器上都不能。）

html代码：

<ul><li id="repeat" class="dropOption active"><a href="#" class="dropLink active tips" data-tips-position="right center"><span class="icon repeat">Repeat Off</span></a>
                        <ul class="repeatOptions active">
                            <li><label>Repeat Each</label> <select class="repeatEach" name="repeatEach"><option value="ayah">Ayah</option><option value="page">Page</option><option value="surah">Surah</option><option value="Juz">Juz</option></select></li>
                            <li><label>Repeat Times</label> <select class="repeatTimes" name="repeatTimes"><option value="1">x1</option><option value="2">x2</option><option value="3">x3</option><option value="4">x4</option><option value="5">x5</option><option value="6">x6</option><option value="7">x7</option><option value="8">x8</option><option value="9">x9</option><option value="0">&infin;</option></select></li>
                            <li><label>Delay</label> <select class="repeatDelay" name="repeatDelay"><option value="0">0 sec</option><option value="1">1 sec</option><option value="2">2 sec</option><option value="3">3 sec</option><option value="4">4 sec</option><option value="5">5 sec</option><option value="5">5 sec</option><option value="6">6 sec</option><option value="7">7 sec</option><option value="8">8 sec</option><option value="9">9 sec</option><option value="ayah">Ayah Duration</option></select></li>
                        </ul>
                    </li>
                </ul>

Answer 1

如果鼠标悬停在选择框上，则e.relatedTarget = null

    $('.dropOption').hover(function(e) {
            $(this).trigger('dropOption', 'show');
        },function(e) {
            if (e.relatedTarget != null) // drop down select box fix
                $(this).trigger('dropOption', 'hide');
        });