Function . not() does not work correctly

Question

I have the following code HTML:

<div id="mini-cart" class="mini-cart dropdown is-not-empty">
    <span class="ic-cart"></span> 
    <span class="count-cart" style="display:none;"><br><br></span>
    <strong class="minhaCart">minha <span class="compraCart">COMPRA</span></strong>
    <span class="caret-cart"></span><br>
    <div id="header-cart" class="mini-cart-content dropdown-content left-hand skip-content skip-content- -style block-cart block" style="display: none;">
        <span class="msg-carrinho-vazio">&nbsp;&nbsp;Seu carrinho está vazio :(&nbsp;&nbsp;&nbsp;</span>
    </div>
</div>

And the following code jQuery:

$j('#mini-cart').not('#header-cart').on('click',function(){
    alert('Teste');
});

What I wanted to do was when the div with the id="mini-cart" were clicked, the alert is shown, however, if the div with the id="header-cart" that is inside it is clicked, the alert cannot be displayed.

Answer 1

In your case it will not be possible to do this on the dial, but you can check it on Function. The click brings with it information of who shot the event among other things (read more here: click event) , then it is possible to identify if the click came from the element you need, and if it is not, do not execute the code or cancel the event (with stopPropagation which is an event method, see more here: stopPropagation). Look at this example (I adapted your HTML to make each element more evident).

$('#mini-cart').click(function(e) { 
  // recuperar o evento, pelo parâmetro 'e' ou 'event'
  e = e || event;
  // recurar o elemento que gerou o evento
  var target = e.target || e.srcElement;
  
  console.log ('Você clicou no ' + target.id);
  alert ('Você clicou no ' + target.id);
  
  if (target.id != 'mini-cart') {
  	// Se clicou em outro elemento dentro de #mini-cart, cancelo o click
      e.stopPropagation();
      return false;
  }
  
  console.log('Continuando com o evento click...');
  alert('Continuando com o evento click...');
 });

.mini-cart {
  width: 500px;
  height: 300px;
  background-color: yellow;
  padding: 50px;
}

.mini-cart-content {
   width: 400px;
   height: 200px;
   background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mini-cart" class="mini-cart dropdown is-not-empty">
    <span class="ic-cart"></span> 
    <span class="count-cart" style="display:none;"><br><br></span>
    <strong class="minhaCart">minha <span class="compraCart">COMPRA</span></strong>
    <span class="caret-cart"></span><br>
    <div id="header-cart" class="mini-cart-content dropdown-content left-hand skip-content skip-content- -style block-cart block">
        <span class="msg-carrinho-vazio">&nbsp;&nbsp;Seu carrinho está vazio :(&nbsp;&nbsp;&nbsp;</span>
    </div>
</div>