Sélectionnez déclenche mouseout/événement mouseleave

Question

Je cache la div suivante -

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

avec ce code -

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

Si l'utilisateur sélectionner une option déclenche également la mouseleave ...

Comment puis-je désactiver les événements mouseout/mouseleave lorsque l'utilisateur sélectionne une option.

Answer 1

J'ai mis votre code dans un jsfiddle pour tester, et sur MacOs X, je n'ai pas le problème que vous avez.

Je suis le système d'exploitation spécifiant, parce que le style est différent sur Windows et Mac OS X.

pourrait-il que vos options vont de votre div lorsque le select est ouvert?

Ceci expliquerait le comportement. La souris serait hors de la div quand il est sélectionné.

Si c'est le cas, la solution serait de définir un height assez grand pour que les options ne sortent pas de la div.

J'espère que cela vous aide.

EDIT:

Vous pouvez tester la cible de l'événement avec « ce » qui est l'élément attache à l'événement. Si elles sont différentes, vous ne déclenchez pas la fonction de masquage.

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

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

Answer 2

C'est ce dont vous avez besoin?

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

Il ne devrait retirer le code HTML lorsque l'utilisateur a sélectionné l'option A ou B? Peut-être ajouter un "Sélectionnez" par défaut et vérifiez d'abord la valeur. Si rien n'a été choisi, ne retirez pas le code 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(); 
    });