자바스크립트 이벤트 버블링 적용 예시 분석_자바스크립트 스킬

그 결과 닫기 버튼을 눌렀을 때 제목 H5에 등록된 mousedown 이벤트가 계속 실행되는 것을 확인했습니다. 무슨 일이 일어나고 있는 걸까요? 실제로 주의 깊게 살펴보면 H5 제목과 A 링크에 등록된 이벤트가 동일하지 않다는 것을 알 수 있습니다. 위 코드에서는 A 링크에 등록된 클릭 이벤트에서 차단 이벤트 메서드를 호출합니다. 단지 "부모 요소에 의해 등록된 유사한 이벤트" 이벤트가 실행되지 않는다는 의미입니다. 즉, H5 타이틀에도 클릭 이벤트가 등록되어 있으면 클릭 이벤트가 실행되지 않고 여기에서 마우스다운이 계속 실행된다는 의미입니다. . 여기에서 mousedown 실행은 제목 표시줄을 클릭했기 때문에 발생하는 것이 아니라 클릭할 때 mousedown 이벤트가 생성되기 때문에 발생합니다. 그런 다음 JavaScript 이벤트 버블링 메커니즘이 존재하기 때문에 해당 이벤트가 부모에게 브로드캐스트되고 의해 mousedown됩니다. H5 제목을 등록합니다. 이 점에 대한 이해를 위해 제 다른 블로그 "onmousedown, onmouseup, onclick이 동일한 라벨 노드 요소에 동시에 적용되는 경우"를 참고하시면 됩니다. 이제 분석을 통해 위 코드를 약간 변경하면 됩니다. A 링크의 클릭 이벤트를 H5 제목과 동일한 mousedown 이벤트로 변경하면 원하는 효과를 얻을 수 있습니다.
관련 주제:
이제 jQuery로 개발할 때 이벤트 버블링을 쉽게 방지하는 방법에 대해 이야기하겠습니다. 뛰어난 스크립팅 프레임워크인 jQuery는 이벤트 캡슐화 및 브라우저 호환성 측면에서 당연히 탁월합니다. 더 자세히 알고 싶다면 내 다른 블로그인 "JQuery의 $.event.fix 기능을 사용하여 브라우저 이벤트 처리 통합"을 읽어보세요.
jQuery를 사용하여 이벤트 버블링을 방지하는 방법은 두 가지가 있습니다.
1. jQuery를 사용하여 호환되는 이벤트 객체를 만들고 직접 event.preventDefault()를 사용합니다.
2. jQuery에서는 false를 반환합니다. 즉, false를 반환합니다. 참고: jQuery를 사용하여 바인딩되지 않은 메서드에서 false를 반환하는 것은 쓸모가 없습니다. 코드는 다음과 같습니다.