jQuery가 이벤트 버블링을 방지하는 방법

조건: 외부 레이어에 DIV 요소가 있고 내부 레이어에 P 요소가 있습니다. DIV는 P 요소의 상위 요소이고 P는 외부 DIV의 하위 요소입니다. 그들 사이에는 포함과 포함이 있습니다.

이벤트: 이제 클릭 이벤트와 같이 두 요소 모두에 동일한 이벤트를 바인딩합니다.

결과: 이때 내부 P 태그를 클릭하면 내부 요소의 클릭 이벤트가 트리거되고 외부 DIV의 클릭 이벤트도 트리거됩니다.

JQuery는 이벤트 버블링을 방지하는 세 가지 방법을 제공합니다.

방법 1: event.stopPropagation();

방법 2: event.preventDefault();

방법 3: false 반환;

차이: event.stopPropagation()은 이벤트 자체가 아닌 이벤트가 버블링되는 것을 방지할 뿐입니다. event.preventDefault()는 이벤트 자체만 방지할 뿐 이벤트가 버블링되는 것을 방지하지는 않습니다. false를 반환하면 이벤트가 발생하는 것을 방지할 뿐만 아니라 이벤트 자체도 방지할 수 있습니다.