js는 기본 이벤트를 방지하고 js는 이벤트 버블링을 방지합니다. js는 이벤트 버블링을 방지합니다_기본 지식

1.event.preventDefault(); -- 요소의 기본 이벤트를 방지합니다.
참고: 요소 a의 클릭 점프에 대한 기본 이벤트인

버튼, 라디오 및 기타 양식 요소에 대한 기본 이벤트

div 요소에는 기본 이벤트가 없습니다

예:

코드 복사 코드는 다음과 같습니다.

바이두

코드 복사 코드는 다음과 같습니다.

var samp = document.getElementByTagName("a ");
samp.addEventListener("click",function(e){e.preventDefault()},false);

설명: 링크를 클릭하면 일반적인 상황에서는 점프가 발생하는데, 이제는 기본 이벤트인 점프 이벤트를 차단하여 바이두로 점프하지 않게 되었습니다.

2. event.stopPropagation() -- 요소 버블링 이벤트 방지

참고: 중첩된 요소에는 일반적으로 특정 효과를 갖는 버블링 이벤트가 있습니다

예:

코드 복사 코드는 다음과 같습니다.

여기에서 버튼을 클릭하면 브라우저는 3, 2, 1을 연속적으로 팝업합니다. 원래는 버튼에 바인딩된 이벤트만 발생하기를 원했지만 실수로 두 부모에서 이벤트를 실행했습니다. 간단한 테스트를 수행했습니다. 프로젝트 개발 중에 버튼과 해당 부모가 동시에 중요한 이벤트에 바인딩된다면 결과는 비참할 것입니다. 이때 해결 방법은 버블링 이벤트를 방지하는 것입니다.

입력에 대한 클릭 이벤트를 등록하고 버블링 이벤트를 방지

코드 복사 코드는 다음과 같습니다.

document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

좋아요! ! !