본문으로 바로가기

a 태그 클릭이벤트 막기

category 퍼블리싱/TIP 2016. 2. 26. 17:18
1
2
3
4
5
$('nav a').on('click',function(e)){
 
  e.preventDefault();
 
}
cs



e.preventDefault()  는 a태그와 관련이 있다.

a태그의 기능은 2가지

  • click이벤트
  • href의 경로이동

위 2가지를 항상 실행한다.

경로를 지정하지 않고 #으로 해두면 클릭 시 페이지 상단으로 이동함.

그 상단으로의 이동을 막기위해 e.preventDefault()를 사용하는 것.



e.stopPropagation()

a의 onclick을 실행했을 때 부모로의 확산을 막아주는 것.

a의 부모태그는 li , ul이 있다.

* a를 클릭했을 때의 반응

  1. a의 onclick실행
  2. li의 onclick실행
  3. ul의 onclick실행

만약 ul에 onclick이벤트가 있다면 a클릭 한번으로 ul의 이벤트도 발생하게 되는 것.

그런고로 a하나만 이벤트를 발생하기 위한것이 바로 e.stopPropagation() 임.


propagation 미 [prpəgéiʃən] 듣기 시작 영 [prɔ̀p-] 듣기 시작주요 뜻

  • 보급
  • 선전
  • 만연