javascript - 이벤트 바인딩 및 반응 시 이벤트 버블링 방지

Question

바로 코드로 들어가 보겠습니다. 오랫동안 고민했는데 어디가 문제인지 모르겠습니다.

으아악

이 기능은 여기서 클릭 이벤트를 사용한다는 점을 제외하면 타오바오 상단의 탐색 바와 유사합니다. 이제 SpreadHandler를 트리거할 때 버블링을 취소하지만 문서의 클릭 이벤트는 계속 트리거됩니다. 이벤트가 a 태그에 묶여 있기 때문인지, 아니면 다른 이유로 인해 발생한 것인지는 모르겠습니다.

Answer 1

React의 합성 이벤트에서 버블링을 방지해도 네이티브 이벤트의 버블링을 취소할 수 없습니다.
Native 이벤트에서 버블링을 방지하면 React의 합성 이벤트에서 버블링을 방지할 수 있습니다.
따라서 혼합을 피해야 하며, 그렇다면 반드시 추가해야 합니다. 문서 이벤트 핸들러의 판단 계층입니다.

으아악

Answer 2

e.preventDeafult()

Answer 3

이것을 시도해 보세요:

으아악

React의 이벤트 메커니즘은 기본 js의 이벤트 메커니즘과 다릅니다.

Answer 4

React의 합성 이벤트는 모두 문서 클릭에 바인딩된 이벤트 프록시를 통해 구현되므로 합성 이벤트가 버블링되는 것을 방지하여(이미 문서에 버블링된) 문서에서 다른 이벤트 처리를 방지하는 것이 불가능하므로 반드시 사용해야 합니다. 네이티브 이벤트