JULog

Parent element에 click이 발생할 때 child element의 클릭이벤트를 제어하기

July 03, 2020

ISSUE

  • 문의 버튼을 클릭했을 때 모달이 열리는 이슈
  • 아이템 전체 요소에 click event를 걸어서 자식 요소를 클릭했을 때도 event가 발생하는 원인

해결 방안

  • click event를 인자로 넘겨준다.
  • 문의 버튼 element를 ViewChild로 받아서 ts에서 제어한다.
  • telElelement에 event.target이 포함(contains()) 되어있지 않으면 모달을 열어준다.

HTML

<div class="item-container" (click)="openModal($event)">
  ......
  <a #telEl [href]="'tel:'+lesson.phoneNumber[0]">
    <si icon="phone-alt-solid"></si>
    <span>문의</span>
  </a>
  ......
</div>

TS

@ViewChild('telEl') telEl: ElementRef;

openModal(event) {
  if (!this.telEl.nativeElement.contains(event.target)) {
    this.bsModalService.show(MobileAcademyItemModalComponent, {
      initialState: { lesson: this.lesson }
    })
  }
}
Written by@[Ju Chan Hwang]
JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요

GitHubFacebook