Html 버블링 현상

Html 버블링 : 부모를 클릭하면 자식도 같이 클릭이 되는 현상이다.

이걸 몰라서 조금해매서 코드를 예시로 조금 정리를 해볼려고 한다.

---

example.html

<label id="video_on">
      <input type="radio" name="options" style="display:none" autocomplete="off" checked>Video Off
</label>

---

example.js

const videoButtonOn = document.querySelector('#video_on');

videoButtonOn.onclick = () => {
    alert('Video On');
    localVideoTracks.forEach(track => localStream.addTrack(track));
    $(localVideo).css('display', 'inline');
};

---

이런식으로 html파일과 js파일이 있다고 쳤을때 html파일의 Video Off를 클릭 하면은
lable 태그에서 한번 input태그에서 한번 그렇게 총 두번 클릭되었다고 판단되어 videoButtonOn.onclick 함수가 두번 실행되게 된다.

이거 때문에 localVideoTracks에 트랙 추가문이 두번씩 반복되는 현상이 생겨서 화상채팅 비디오가 잘 작동이 안되는 문제가 있었고 input을 없애고 작동시켜보니 잘 동작되었다!