0 
#childBox {
    width:200px;
    height:200px;
    border:solid thin #900;
}


<div id="parentBox">
    <div id="childBox">
        <select>
            <option>Opt1</option>
            <option>Opt2</option>
                <option>Opt3</option>
            </select>
    </div>
    <div id="mesIn"></div>
    <div id="mesOut"></div>
</div>


var i = 0, y=0; 
$('#parentBox').on({
    mouseenter:function(e){ 
        //console.log ('in: ');
      i++; $('#mesIn').text('IN '+i); 
    },
    mouseleave: function(e){    
      //console.log ('out: ');
      y++; $('#mesOut').text('OUT '+y); 
    }
}, '#childBox');

マウスがオプションに入ると、最初に「out」として起動し、次に「in」として起動します。
このprbはFF23とIE9で見つかりました（FFはクラッシュし
ています）Chrome 28とOpera 12.16
では正常に機能していますjquery 1.10.02があります

上記のコード: http://jsfiddle.net/buicu/ZCmRP/1/
私のコードのより詳細なバージョン: http://jsfiddle.net/buicu/ZH6qm/4/

setTimeout/clearTimeout を大量に配置できることはわかっています。しかし、もっとシンプルでクリーンなものが欲しいです。

e.stopImmediatePropagation(); 役に立ちません（少なくとも私のテストでは）。

クリックを選択にバインドする (および変数を false に設定する) ことも役に立ちません。選択ドロップダウンメニューが開いたままになり、マウスが大きなメニューを離れた場合、大きなメニューも開いたままになるためです（マウスがいつオプションを離れたかを追跡し、変数を元に戻すことができることを知っています。しかし、マウスが離れたときにチェックするこのオプションは、ブラウザー間で一貫して行うことはできません)。

このバグを簡単に修正できる人はいますか?

4

2 に答える 2

1

投稿はかなり前に作成されましたが、Google ではこのトピックは実際のものであるため、おそらく誰かの役に立ちます。

基本的に、このソリューションを使用できます：

jQuery('#parentBox').mouseleave(function(){}, function(e){
    if (e.target == this) {
        console.log('leave');
    }
    else {
        console.log('false');
    }
});

しかし、私の場合、私はこれを使用しています:

jQuery('#parentBox').mouseleave(function(){}, function(e){
    if (jQuery('#parentBox').find(e.toElement)) {
        console.log('leave');
    } 
    else {
        console.log('false');
    }  
});
于 2013-12-16T11:34:06.063 に答える