ㄷㄷ

 

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

 

그런데.. 클릭하다보니 저 티끌만한 박스를 클릭하는게 여간 짜증나는게 아니었고, 그래서 간단하게 상위 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에서 이벤트 전파를 중단하는 네가지 방법

자바스크립트 이벤트 리스너에서 preventDefault() 와 stopPropagation() 그리고 return false 는 자바스크립트 프로그래밍을 할 때 이벤트 중단을 위해 자주 사용되는 코드들이다. 이벤트 중단 시에 사용되는 방..

programmingsummaries.tistory.com

 

반응형