如何发生点击功能不是div而是按钮

Question

If I press the boom button, I want only "boom!" to occur.
But when I click boom first the alert boom pops up, after clicking ok This alert closes and another alert which must pop up only when test is clicked shows up.
If I can't move the button out of the div, how do I handle it?

 $('#divid1 #boom').click(function() { alert("boom!"); }); $('#divid1').click(function() { alert("no?!"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divid1" style="background-color: #939651; width: 30%; height: 30%;"> <h1>test</h1> <p><button id="boom">boom!</button></p> </div>

Answer 1

Use event.stopPropagation() to prevent the event from bubbling out to the container.

 $('#divid1 #boom').click(function(e) { e.stopPropagation(); alert("boom!"); }); $('#divid1').click(function() { alert("no?!"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divid1" style="background-color: #939651; width: 30%; height: 30%;"> <h1>test</h1> <p><button id="boom">boom!</button></p> </div>