UI에서 이후 이벤트 발생 제한하기.

문제상황

현재 테스트 하고 있는 UI 에서 채팅방 목록을 클릭하면 채팅방으로 들어갈 수 있는 모달이 하나 뜬다.

그런데 채팅방의 태그를 누르면 해당 태그를 포함한 채팅방을 보여주어야하는 상황이였다.

따라서 태그를 클릭했을 때 이벤트를 발생하게 했어야했다.

그런데 지금의 문제점은 내가 가장 상위 div에 onClick 이벤트를 넣어준 상태여서,

이벤트 2 -> 이벤트 1가 발생했다.

따라서 나는 이벤트 1이 발생하지 않기를 원했다.

 <div
    key={index}
    className="a1"
    onClick={() => onClickChatBeforeModal(channela, index)}>  // 이벤트 1
    <div className="first">
      <span
        onClick={e => {
          console.log('hello'); // 이벤트 2
        }}
        className="tag">
        <span className="chatTypeTag">{chatType}</span> {h}
      </span>
    ...
  </div>

 

해결방법

event.stopPropagation()

위 이벤트 메소드의 기능은 다음과 같다.

• 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.
• 이벤트가 상위혹은 하위로 전파되지 않도록 중단합니다.

이벤트가 발생한 후에 다음 이벤트로 파생되지 않게끔하는 나의 목적과 같기 때문에 다음 메소드를 사용하여 문제를 해결하였다.

 

참고자료

https://porimp.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8JavaScript%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B7%A8%EC%86%8C%ED%95%98%EA%B8%B0preventDefault-stopPropagation

(자바스크립트/JavaScript)이벤트 버블링, 캡쳐, 이벤트 취소하기(preventDefault, stopPropagation)