Click spesific element inside card-CodePudding

I have an example card that has a button inside. When I click the card, a log will appear that the card is clicked, but when I click the button a message appear that I clicked the card and the button. How to handle this problem?

$('.cards').on('click', function(){
    console.log('click the card')
})

$('#buttonAdd').on('click', function(){
    console.log('click the button')
})

.cards{
  padding:20px;
  background-color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, eveniet.</p>
  <button id="buttonAdd">Add</button>
</div>

CodePudding user response：

By clicking button you're also click card. First thrown event for button, then for card (and so on traversing up to the body and html). If you don't want event to propaggate add event.stopPropagation() like:

$('#buttonAdd').on('click', function(e){
    e.stopPropagation();
    console.log('click the button')
})

notice, I've added event parameter (e) to your function.

CodePudding user response：

Just add a return false at the end of your child function (#buttonAdd) to prevent event propagation.

Alternatively you could add a event.stopPropagation() to stop the event propagation. See here: jQuery stopPropagation

$('.cards').on('click', function(){
    console.log('click the card')
})

$('#buttonAdd').on('click', function(){
    console.log('click the button')
    return false
})

.cards{
  padding:20px;
  background-color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, eveniet.</p>
  <button id="buttonAdd">Add</button>
</div>