選択は、私は次のdiv隠すマウスアウト/ mouseleaveイベント

Question

をトリガ - どのように

...ユーザーはmouseleaveもトリガーオプションを選択した場合

$("#testDIV").mouseleave(function() { 
      $(this).animate({ 'opacity': 0 }, 500, function() { $(this).remove(); }); 
     }); 

- このコードで

<div id="testDIV" style="background-color: #4cff00; padding: 20px;"> 
     <select> 
      <option>OptionA</option> 
      <option>OptionB</option> 
     </select> 
    </div> 

をユーザーがオプションを選択したときに、mouseout/mouseleaveイベントを無効にすることはできますか？

Answer 1

私はあなたのコードをjsfiddleに入れてテストしました.MacOs Xではあなたの問題がありません。

スタイリングは、WindowsとMac OS X上で

異なっているので、私はそれがselectが開いているときに、あなたのオプションは、あなたのdivの外に行っていることが考えられ、OSを指定していますか？

これは動作を説明します。それが選択されると、マウスはdivから外れます。

その場合は、heightを設定して、オプションがdivから外れないようにすることができます。

お手伝いします。

EDIT：

あなたは要素のイベントにアタッチされ、「これ」とイベントのターゲットをテストすることができます。これらが異なる場合は、hide関数をトリガーしません。

$("#testDIV").mouseleave(function (event) { 
    if (event.target !== this) return; 

    event.stopImmediatePropagation(); 
    $(this).animate({ 'opacity': 0 }, 500, function() { 
    $(this).remove(); 
    }); 
}); 

Answer 2

これは必要なのですか？

var $div = $("#testDIV"); 
 

 
function mLeave(e){ 
 
    $div.animate({ 'opacity': 0 }, 500, function() { $div.remove(); }); 
 
} 
 
$div.on('mouseleave', mLeave); 
 

 
$("#testDIV select").click(function() { 
 
    $div.off('mouseleave', mLeave); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testDIV" style="background-color: #4cff00; padding: 20px;"> 
 
     <select> 
 
      <option>OptionA</option> 
 
      <option>OptionB</option> 
 
     </select> 
 
    </div>

Answer 3

だから、それだけで、ユーザーがオプションAまたはBを選択したHTMLを削除する必要がありますか？ デフォルトの「選択してください」を追加して、値を最初にチェックしてください。何も選択されていない場合、htmlを削除しないでください。あなたは、ユーザーがオプションを選択した後に消えるのdivを停止しようとしているどのようなコード

HTML

<div id="testDIV" style="background-color: #4cff00; padding: 20px;"> 
<select> 
    <option value="default">Please select</option> 
    <option value="A">Option A</option> 
    <option value="B">Option B</option> 
</select> 
</div> 

jQueryの

var optionVal; 

    $("#testDIV").mouseleave(function() { 
     if(optionVal != "default"){ 
     $(this).animate({ 'opacity': 0 }, 500, function() { $(this).remove(); }); 
     } 
    }); 
    $("#testDIV select").on('click change', function() { 
     optionVal = $(this).val(); 
    });