작은악마`s Blog

이벤트와 관련한 작업을 하다보면 예기치 못한 문제가 종종 발생한다.
이번에는 이벤트가 서브에서 상위로 순차적으로 발생하는 문제(이벤트 버블링)를 만나고
이를 처리하였다.

지난번 포스팅한 글 "object is not a function 에러 발생!!" 의 예제를 가지고
살펴보겠다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

그룹1
 

  
맴버1
  
맴버2
  
맴버3
 
 
그룹2
 

  
맴버4
  
맴버5
  
맴버6
 
 
 

일단 구조는 지난번과 같다. 그룹1과 그룹2를 클릭하면 하단의 맴버 목록이 숨김/표시를 반복하는것이다.
여기에 하나를 추가하자. 위 소스를 보면 지난번 포스팅과 다르게
"<a href='javascript:void(0);' onClick='subclick(); return false'>"란 코드가 들어가 있다.
즉, 그룹을 클릭하면 토글 시키고 맴버를 클릭하면 다른 동작을 하게 하는 것이다.
추가한  A 태그내에 href속성에 과 onclick 이벤트에 주어진 void(0), return false 등을 쓴 이유는
"A 태그에서 onClick 이벤트 사용"에 설명해놓았다.

이제 코드를 붙여보자.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

그런데 이때 문제가 발생한다.
맴버를 클릭하고 alert창을 닫으면 마치 그룹을 클릭한것처럼 맴버목록이 숨겨진다.
이는 클릭이벤트가 맴버에서 그룹까지 전해진것인데 이를 이벤트 버블링이라고 한다.

지금 상황에서 이는 내가 원하지 않는 동작이다.

그럼 이를 어떻게 처리할까? 버블링을 막는 것이다.

첫번째 방법은 subclick() 함수내에서 처리하는것으로
event.cancelBubble = "true"; 를 삽입한다.

두번째 방법은 jquery로 페이지가 onload일때 다음 코드로 처리하는 방법이다.
$(".group a").click(function(e) {
 e.stopPropagation();
});
 
두가지 모두 테스트 해보았고 정상적으로 동작하였다.

최종적인 소스는 아래와 같다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

HTML 작업을 진행하다 보면

A 태그는 이동을 하는 역활을 하는 것이지만 몇가지의 이유로

A 태그에 onClick 이벤트를 써야 하는 경우가 있다.

이때 A 태그의 href의 기능을 무효화 해야하는데...

이를 위해서는 주로 아래의 방법을 많이 사용한다.

<a href='#' onClick='함수();'>

이 경우 onClick에 의해서 페이지가 이동하지 않을 경우

페이지가 길면 최상단으로 이동을 하는등의 원치 않는 문제를 야기할 수 있다.

그래서 구글링을 해본 결과...

<a href='#' onClick='함수(); return false'>

또는

<a href='javascript:void(0);' onClick='함수(); return false'>

등을 사용하면 된다.