283 votes

Comment faire en sorte que l'événement de clic se déclenche UNIQUEMENT sur le DIV parent, et non sur les enfants ?

J'ai un DIV avec une classe foobar et quelques DIVs à l'intérieur de ce DIV qui ne sont pas classés, mais je suppose qu'ils héritent de la classe foobar classe :

$('.foobar').on('click', function() { /*...do stuff...*/ });

Je veux que cela ne se déclenche que lorsque l'on clique quelque part dans le DIV mais pas sur ses DIVs enfants.

6voto

Wonx2150 Points 44

J'ai eu le même problème et j'ai trouvé cette solution (basée sur les autres réponses).

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

En gros, il est dit que si la cible est le div, alors il faut exécuter le code, sinon il ne faut rien faire (ne pas le cacher).

5voto

Michalis Points 46
$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

3voto

Dejan Markovic Points 17

Vous pouvez utiliser event.currentTarget. Cela ne fera que cliquer sur l'élément qui a reçu l'événement.

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>

2voto

Xenxier Points 146

Si vous ne pouvez pas utiliser pointer-events: none; et qui visent des navigateurs modernes, vous pouvez utiliser composedPath pour détecter un clic direct sur l'objet comme ceci :

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

Vous pouvez en savoir plus sur composedPath ici : https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

1voto

Wukadin Points 11

Mon cas est similaire mais il s'agit d'une occasion où vous avez peu foobar -et vous ne voulez en fermer qu'un seul - par un seul clic :

Trouver le cas du parent

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

Trouver un cas d'enfant

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X