0

Есть код

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

    </div>    
</div>

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

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

3 ответа 3

4

Нужно использовать 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>

1
3

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>

2

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

<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>
1
  • Всем спасибо stopPropagation() то что нужно.
    – antonin14d
    26 авг 2019 в 12:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.