How to stop firing parent click event when child event clicked

Question

I have this structure of divs and I want to prevent parent click event from triggering when the child element is clicked.

    <div onclick='methods(param)'>
     <div></div>
     <div>
      <button onclick='method2(param2)'></button>
     </div>
    </div>

I tried passing event with each onclick method but still it does not prevent parent click event.

Answer 1

You can pass & use the event object and use stopPropagation

function methods(e) {
  console.log(' Parent function')
}

function method2(e) {
  console.log(' Child function');
  event.stopPropagation();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick='methods()'>
  <div></div>
  <div>
    <button onclick='method2(event)'>Button</button>
  </div>
</div>