data - parents jquery




Como ter clique em evento APENAS acionar pai DIV, não filhos? (6)

Eu não recebi a resposta aceita para o trabalho, mas isso parece fazer o truque, pelo menos na baunilha JS.

if(e.target !== e.currentTarget) return;

Eu tenho um DIV com um foobar classificado, e alguns DIVs dentro do DIV que não possuem, mas suponho que eles estão herdando a classe foobar :

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

Eu quero que disparar apenas quando clicar em algum lugar no DIV, mas não em seus filhos DIVs.


Eu tive o mesmo problema e criei essa solução (com base nas outras respostas)

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

Basicamente, diz que se o alvo é o div, então execute o código; caso contrário, não faça nada (não o esconda)


Meu caso é semelhante, mas é a ocasião em que você tem poucos foobar -s e deseja fechar apenas um - por um clique:

Encontre o caso pai

$(".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'
});

Encontrar caso infantil

$(".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'
});

Se o e.target é o mesmo elemento, você não clicou em um descendente.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});
.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>


Você pode usar event.currentTarget. Ele fará clique em evento apenas elemnt que tenha evento.

target = e => {
    console.log(e.currentTarget);
  };
<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>


//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

Isso interromperá a propagação (bubbling) do evento click em qualquer elemento (s) filho (s) do (s) elemento (s) .foobar para que o evento não atinja o (s) elemento (s) .foobar para disparar seu manipulador de evento (s) ).

Aqui está uma demonstração: http://jsfiddle.net/bQQJP/







onclick