Jquery Click Event Bubbling 방지

간혹 Jquery 클릭 이벤트 실행시 1회가 아니라 여러 번 실행되는 경우가 있습니다. 이런 현상이 나타나는 이유는 사용자가 마우스로 버튼을 클릭했을 때 버튼을 감싸고 있는 부모 태그들도 이 클릭 이벤트에 반응을 하기 때문입니다. 이러한 현상을 Bubble Up이라고 합니다. 이러한 Bubbling을 해결하는 방법은 아래의 방법들이 있습니다.

.off() 사용

$(element).off().on('click', function () {
    // body
});

.off() 메서드는 이벤트를 바인딩 해제하는 경우에 사용하는게 적절합니다. 그래서 .on() 메서드의 이중 로딩으로 발생하는 중복 실행 오류를 숨길 수는 있어도 좋은 접근법이 아니라고 합니다.

.stopPropagation() 사용

$(element).on('click', function(event) {
    event.stopPropagation();
    // body
});

.stopPropagation() 메서드는 부모 태그로의 이벤트 전파를 stop 합니다.