참고: https://webisfree.com/2016-06-15/[자바스크립트]-이벤트-버블링-제거방법-stoppropagation()
<h2>이벤트 버블링 막기</h2>
<div
style={{
width: "80%",
height: "100px",
backgroundColor: "salmon",
margin: "10px auto",
}}
onClick={() => {
alert("전체 영역 클릭");
}}
>
전체 영역
<div
style={{
width: "80%",
height: "50px",
backgroundColor: "greenyellow",
margin: "10px auto",
}}
onClick={() => {
alert("겹쳐진 영역 클릭");
}}
>
겹쳐진 영역
</div>
</div>
이렇게 div나 다른 html 태그들이 겹쳐져 있을 때 겹쳐진 영역에서 클릭을 했을 때 클릭한 영역의 이벤트 1개만 일어나야 할 때가 많다.
겹쳐진 영역을 클릭 시 처음에는 겹쳐진 영역의 onClick 이벤트가 발생한다.
하지만 그 이벤트 이후..!!
이렇게 뒤에 있는 영역의 onClick 이벤트까지 겹쳐져서 발생하게된다.
이런 것을 이벤트 버블링이라고 하는데, 어떻게 해결해야될지 막막하다.
하지만 한 줄만 추가해주면 끝이다!!!
<h2>이벤트 버블링 막기</h2>
<div
style={{
width: "80%",
height: "100px",
backgroundColor: "salmon",
margin: "10px auto",
}}
onClick={() => {
alert("전체 영역 클릭");
}}
>
전체 영역
<div
style={{
width: "80%",
height: "50px",
backgroundColor: "greenyellow",
margin: "10px auto",
}}
onClick={(event) => {
event.stopPropagation();
alert("겹쳐진 영역 클릭");
}}
>
겹쳐진 영역
</div>
</div>
여기 빨간 박스부분의 내용만 추가해줬음
event의 stopPropagation() 함수를 이용하면 간단하게 해결된다.
해당 함수는 현재 발생한 이벤트 이후의 이벤트들을 막아주는 함수이다~
이제 얘를 넣어주면 겹쳐진 영역을 클릭해도 자기가 가지고 있는 이벤트만 실행되고 끝이난다.
https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation
[javascript] 문자 아스키코드 변환 & 아스키코드 문자로 변환하는 법 feat.프로그래머스 시저 암호 풀이 (0) | 2021.12.03 |
---|---|
[javascript] 자바스크립트에서 cookie를 조회하고 저장하고 삭제하는 법 // 웹 쿠키 다루는 법! (0) | 2021.11.30 |
[javascript] formData에 들어있는 값 반복문을 통해 확인하는 법 (0) | 2021.11.24 |
[javaScript] 동적 변수 생성하기, 변수 이름 합쳐서 생성하기 (No eval, window함수) (0) | 2021.11.23 |
[JavaScript] 프로그래머스 하샤드 수 문제, Array.from() 함수 이용해서 풀어보기 (0) | 2021.10.14 |