Click specific 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 log message appears that I clicked the card and the button.

It should only show the log message for the button when clicking on the button. Not the card.

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>