Блог

Главная - Вопросы по программированию - Как создать функцию щелчка не по div, а по кнопке

Как создать функцию щелчка не по div, а по кнопке

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

рис1

Если я нажму кнопку boom, я хочу, чтобы происходило только «boom!».
Но когда я нажимаю boom сначала, boom появляется предупреждение, после нажатия на ok это предупреждение закрывается, и появляется другое предупреждение, которое должно появляться только при нажатии на test.
Если я не могу переместить кнопку из div, как мне с этим справиться?

 $('#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>

Ответ №1:

Используйте, чтобы предотвратить передачу события в контейнер. event.stopPropagation() 

 $('#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>