Выберите триггеры MouseOut/MouseLeave событие

Question

Я прячу следующий DIV -

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

с этим кодом -

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

Если пользователь выбирает опцию MouseLeave также вызывает ...

Как я могу отключить события mouseout/mouseleave, когда пользователь выбирает параметр.

Answer 1

Я поставил ваш код в jsfiddle для тестирования, а на Mac OS X у меня нет проблемы с вашим.

Я определения ОС, потому что стиль отличается от Windows, и Mac OS X.

Может быть, ваши варианты выходя из DIV, когда select открыт?

Это объясняет поведение. Когда он будет выбран, мышь выйдет из 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

Так что следует удалить только HTML, когда пользователь выбрал опцию A или B? Возможно, добавьте по умолчанию «Пожалуйста, выберите» и сначала проверьте значение. Если ничего не выбрано, не удаляйте html.

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(); 
    });