[javascript] 상위 이벤트 전파 막기

 

ㄷㄷ

 

이번에 작업을 하다가, 위 이미지 처럼 체크 박스를 만들어서 클릭처리 해야되는 상황이 생겼다.

 

그런데.. 클릭하다보니 저 티끌만한 박스를 클릭하는게 여간 짜증나는게 아니었고, 그래서 간단하게 상위 td 태그에 input 박스 클릭 이벤트를 주었다.

 

???

 

 

 

.................?

 

 

이런 현상이 생긴다.

 

간단한 이유다.

 

input 박스를 클릭할때 check : true => 상위로 이벤트가 전파되면서 td 의 클릭 이벤트가 작동하면서 check : false

 

두번 클릭이 되기 때문에 클릭이 안되는 것 처럼 보이는 것..

 

 

 

이런 현상을 막으려면 상위 이벤트 전파를 막는 작업이 진행되어야 한다.

 

예전에 봐둔 아주아주 정리를 잘 해놓은 글이 있어서 이번에 사용해 보았다. (아래에 출처 표기)

 

 

 

 

 

아아주 좋습니다.

 

 

 

event.preventDefault()

현재 이벤트의 기본 동작을 중단한다.

​

event.stopPropagation()

현재 이벤트가 상위로 전파되지 않도록 중단한다.

​

event.stopImmediatePropagation()

현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단한다.

​

return false

jQuery를 사용할 때는 위의 두개 모두를 수행한 것과 같고,

jQuery를 사용하지 않을 때는 event.preventDefault() 와 같다.

 

 

출처 : https://programmingsummaries.tistory.com/313

[JavaScript] JavaScript에서 이벤트 전파를 중단하는 네가지 방법