La division se soulève lorsque l'on clique sur les éléments qu'elle contient

Question

J'ai un div qui glisse vers le bas (s'ouvre) lorsque je clique sur une certaine sélection d'entrée. A l'intérieur de ce div J'ai d'autres sélections d'entrée et mon objectif est de faire glisser vers le haut le div lorsque je clique sur le reste de la page.

Mon problème :

En div se glisse lorsque je sélectionne un élément dans l'entrée sélectionne à l'intérieur de celle-ci, et je ne veux pas que cela se produise.

• Existe-t-il un moyen de faire glisser vers le haut le div uniquement lorsque je clique à l'extérieur ?
• Pourquoi les sélections à l'intérieur de la div font-elles également glisser celle-ci vers le haut ?

Voici mon javascript pour faire glisser la div vers le haut :

$(document).mouseup(function (e) {
  var container = $('.myDiv');
  if (container.has(e.target).length === 0) {
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

Answer 1

La div se lève lorsque je sélectionne un élément dans l'entrée selects inside et je ne veux pas que cela se produise.

Existe-t-il un moyen de faire glisser la div vers le haut uniquement lorsque je clique sur le bouton de la souris ? Pourquoi les sélections à l'intérieur de la div la font-elles également glisser vers le haut ?

Utilisation event.stopPropagation() sur le(s) élément(s) enfant(s) pour empêcher le déclenchement de l'événement de glissement par ces derniers.

event.stopPropagation - Empêche l'événement de remonter dans le DOM empêchant ainsi tout gestionnaire parent d'être notifié de l'événement.

Voici un exemple simple jsFiddle et l'exemple de base ci-dessous.

jQuery :

$('div').click(function(){
  $('#slideMeUp').slideUp();
});

$('select').click(function(e){
  e.stopPropagation();
});

HTML :

<div>Clicking here will trigger it! 
    <select>
        <option>This won't trigger the click event anymore!</option>
    </select>
    Clicking here will also trigger it!
</div>

<div id="slideMeUp">Only clicking the outer div will slide me up!</div>

Answer 2

Vous pouvez vérifier que vous e.target.id avec votre container id

        $(document).mouseup(function (e) {
            var container = $('.myDiv');
            if(e.target.id==$(this).attr('id'))
            {
            if (container.has(e.target).length === 0) {
                $(container).removeClass('close');
                $(container).addClass('open');
                $(container).next().slideUp(200);
            }
            }
        });

Answer 3

Je suggérerais de lier mousedown plutôt que mouseup . Il existe des incohérences de comportement entre les navigateurs. peut ont quelque chose à voir avec votre problème.

Vous devez également ajouter une logique pour vérifier que l'élément cliqué n'est pas l'élément div lui-même, en cliquant juste à l'extérieur d'un input mais toujours à l'intérieur de la div entraînerait actuellement la création d'un slideUp à se produire.

if (!container.has(e.target).length && !container.is(e.target)) {
  ...
}

Pour le reste, tout devrait bien se passer.

Avoir un violon

Answer 4

Si ce sont des éléments spécifiques qui posent problème, peut-être quelque chose comme ceci ?

Au clic, demandez-lui de faire glisser votre div vers le haut tant que l'élément cliqué n'est pas dans la liste.

('body').click(function(event) {
  if (!$(event.target).is('#id_of_item .class_to_ignore')) {
    var container = $('.myDiv');
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});