JavaScript에서 stopPropagation 메소드를 사용하는 방법은 무엇입니까?

이 글에서는 유용한 코드 예제와 함께 stopPropagation() 메서드를 소개합니다. 그런 다음 stopPropagation() 메서드와 PreventDefault() 메서드의 차이점을 이해하게 됩니다.

stopPropagation() 이벤트 메소드 - 상위 요소는 이 메소드를 사용하여 이벤트에 액세스할 수 없습니다. 방법. 일반적으로 이 함수는 동일한 이벤트에 대한 여러 호출을 방지하기 위해 만들어졌습니다. 확산. 예를 들어, 버튼 요소가 div 태그 내에 포함되어 있고 둘 다 onclick 이벤트, 버튼 요소와 관련된 이벤트를 활성화하려고 할 때마다 div 요소가 실제로 활성화되어 있기 때문에 div 요소와 관련된 이벤트도 실행됩니다. 버튼 요소.

문법

으아악

stopPropagation() 메서드는 상위 액세스 이벤트를 차단하고 사용할 수 있습니다. 이 문제를 해결하세요.

예 1

으아악

외부 div "my Second DIV(2)"를 클릭하면 아래와 같이 확인 상자가 한 번만 나타납니다.

또한 내부 div "my First DIV(1)"을 클릭하면 아래와 같이 확인 상자가 두 번 나타납니다.

다음으로 확인 버튼을 클릭하면 외부 div "My Second DIV(2)" 확인 상자가 나타납니다.

체크박스를 선택하고 내부 div "my First DIV(1)"를 클릭하세요. 아래 스크린샷. 확인 상자는 한 번만 나타납니다.

예 2

이 예에서는 event.stopPropagation() 메서드가 어떻게 구현되는지 이해해 보겠습니다. 그러면 버튼 요소에서 단일 기능이 실행됩니다.

으아악

preventDefault() 메소드 - 이벤트 인터페이스에 있는 메소드입니다. 이 방법을 사용하면, 브라우저가 선택한 요소에 대해 기본 작업을 수행하지 못하도록 합니다. 경우에만 기술이 이를 수행할 수 있으면 이벤트가 취소될 수 있습니다. 예를 들어 스크롤 및 휠 이벤트는 다음과 같습니다. 피할 수 없는 사건의 몇 가지 예.

문법

으아악

예 3

이 예에서 링크가 URL을 따라가는 것을 방지하여 브라우저에 액세스할 수 없도록 하는 방법을 알아봅시다. 다른 페이지를 방문하세요.

으아악

링크를 클릭하면 "이 이벤트는 차단되어 해당 URL에 접근할 수 없습니다"라는 확인 상자가 표시됩니다.

위 내용은 JavaScript에서 stopPropagation 메소드를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!