Вопрос про onclick()

103

20 июня 2021, 16:20

Есть код

<div onclick="a()">
    <div onclick="b()">
    </div>    
</div>

Если нажать на внутренний блок сначала выполнится b() потом а()

Как сделать, чтобы выполнялась только b(); т.е только то, что навешано на елемент по которому кликают, вне зависимости от того, что навешано на его родительские элементы?

Answer 1

stopPropagation

const a = () => console.log('a') 
const b = (e) => { 
  e.stopPropagation(); 
  console.log('b'); 
}

.c1 { width: 150px; height: 150px; border: 1px red solid; } 
.c2 { width: 50px; height: 50px; border: 1px blue solid; }

<div class="c1" onclick="a()"> 
  <div class="c2" onclick="b(event)"> 
  </div> 
</div>

Answer 2

Нужно использовать stopPropogation. В браузерах есть механизм "всплытия" события. Поэтому сначала срабатывает клик на внутреннем элементе, а потом на внешнем. Что бы избежать этого и используют stopPropagation

const parent = document.getElementById('parent'); 
const child = document.getElementById('child'); 
 
const onclick = e => { 
  e.stopPropagation(); 
  alert('Покажется один раз'); 
} 
 
parent.onclick = onclick 
child.onclick = onclick

#parent { 
  width: 200px; 
  height: 200px; 
  padding: 50px; 
  background: black; 
  box-sizing: border-box; 
} 
 
#child { 
  width: 100px; 
  height: 100px; 
  background: red; 
}

<div id='parent'> 
  <div id='child'></div> 
</div>

Answer 3

Пример чтоб заработал именно ваш код:

<div onclick="a()">
    <div onclick="event.stopPropagation(); b()">
    </div>    
</div>

Но так обычно не делают. Обычно делают как-то так:

<script type="text/javascript">
function b(event) {
  event.stopPropagation();
  // ну и дальше свой код
}
</script>
<div onclick="a()">
    <div onclick="b(event)">
    </div>    
</div>