Блог

Вот мой HTML-файл

 <div class="a">
    <div class="b">

    </div>
</div>
<script>
    document.querySelector('.a').onclick = ()=>{
        document.querySelector('.a').style.backgroundColor ='black'
    }
    document.querySelector('.b').onclick = ()=>{
        document.querySelector('.b').style.backgroundColor ='violet'
    }

</script>
  

Когда я нажимаю на div с классом ‘b’, также вызывается обработчик событий в div с классом ‘a’. Я хочу, чтобы вызывался только div с обработчиком событий класса ‘b’. Кто-нибудь может помочь в этом?

Это Event Bubbling , что означает, что каждое событие запускается не только на целевом элементе, но и на его элементах-предках.

Чтобы предотвратить такое поведение, вы можете использовать Event.stopPropagation() , чтобы остановить распространение события на элементы-предки целевого элемента.

 document.querySelector('.a').onclick = () => {
  document.querySelector('.a').style.backgroundColor = 'black'
}

document.querySelector('.b').onclick = (event) => {
  event.stopPropagation();
  document.querySelector('.b').style.backgroundColor = 'violet'
}  

 div { width: 100px; height: 100px; }
.a { padding: 40px; background: red; }
.b { background: blue; }  

 <div class="a">
  a
  <div class="b">b</div>
</div>  

В JS есть концепция, называемая обработкой событий. По умолчанию любое событие, происходящее в определенном элементе, будет передано родительскому элементу и его родительскому элементу и так далее, пока событие не достигнет документа.

Чтобы остановить это поведение, Event.stopPropagation придет на помощь и прекратит передачу события родительскому элементу.

Таким образом, в этом случае вызов e.stopPropagation в onclick обработчике div с классом b , т. Е. внутреннего div, остановит распространение события на родительский div.

 document.querySelector('.a').onclick = (e) => {
  document.querySelector('.a').style.backgroundColor = 'black'
}
document.querySelector('.b').onclick = (e) => {
  e.stopPropagation();
  document.querySelector('.b').style.backgroundColor = 'violet'
}  

 .b {
  width: 50%;
}  

 <div class="a">
  <div class="b">
  Dummy
  </div>
</div>  

Попробуйте это :

  document.querySelector('.a').onclick = ()=>{
        document.querySelector('.a').style.backgroundColor ='black'
    }
    document.querySelector('.b').onclick = (e) => {
        e.stopImmediatePropagation();
        document.querySelector('.b').style.backgroundColor ='violet'
    }  

 <div class="a">a
    <br/>
    <div class="b">
        Click here!
    </div>
</div>