JavaScript에서 인라인 onclick 속성을 사용하여 이벤트 전파를 중지하는 방법은 무엇입니까?

때로는 중첩된 HTML 요소에 동일한 이벤트를 추가해야 할 때가 있습니다. 예를 들어 두 개의 div가 있는데 하나는 상위 div이고 다른 하나는 하위 div입니다. 이제 상위 및 하위 div에 onclick 이벤트를 추가하고 사용자가 상위 및 하위 div를 클릭할 때 다양한 기능을 수행해야 합니다. 이 경우 항상 상위 및 하위 div에서 이벤트를 실행합니다.

다음 예제를 통해 중첩된 HTML 요소에서 동일한 이벤트를 수행하는 방법을 살펴보겠습니다.

예

아래 예에서는 두 개의 div를 만들었습니다. 외부 div에는 "parent-div" 클래스 이름을, 내부 div에는 "child-div" 클래스 이름을 지정했습니다.

또한 두 div 요소에 대해 서로 다른 기능을 수행하는 onclick 이벤트도 추가했습니다. 사용자가 내부 div를 클릭하면 클릭 이벤트가 상위 div에서도 실행됩니다.

으아아아

위 문제를 해결하려면 하위 div를 클릭하고 상위 div의 click event.stopPropogation() 메서드를 호출하는 등의 이벤트를 사용해야 합니다.

문법

사용자는 다음 구문에 따라 stopPropgation() 메서드를 사용하여 상위 요소에 대한 이벤트 전파를 중지할 수 있습니다.

으아아아

예

아래 예에서는 HTML

태그 안에 일부 텍스트를 추가하고, ExecuteP() 함수를 실행하는 onclick 이벤트에 일부 텍스트를 추가했습니다. 또한

태그 안에 태그를 추가하고, runSpan() 함수를 실행하는 스팬 태그에 "onclick" 이벤트를 추가했습니다.

또한 사용자가 를 클릭할 때 태그에서 이벤트 전파를 중지하기 위해 event.stoPropogation() 메서드와

요소의 onclick 이벤트를 사용했습니다.

출력에서 사용자는 요소의 텍스트를 클릭하면 ExecuteSpan() 함수만 실행되는 것을 볼 수 있습니다.

으아아아

예

아래 예에서는 HTML 마크업을 사용하여 세 개의 중첩 요소로 구성된 계층 구조를 만들었습니다. 각 요소에 onclick 이벤트를 추가했습니다. event.stopPropogation() 메서드를 사용하지 않으면 항상 firstDivClick() 함수가 실행됩니다.

이 문제를 해결하기 위해 이벤트를 호출할 때 이벤트를 함수의 매개변수로 전달하고 함수 내에서 stopPropogation() 메서드를 사용합니다.

사용자가 메뉴 텍스트를 클릭하면 kebabMenuClick() 함수만 실행되는 것을 볼 수 있습니다. 사용자가 두 번째 div를 클릭하면 단순히 secondDivClick() 함수가 실행됩니다.

으아아아

사용자는 이벤트에 event.stopPorpogation() 메서드를 사용하는 방법을 배웠습니다. 기본적으로 이벤트가 상위 요소로 전파되는 것을 방지하는 데 사용됩니다. 이렇게 하면 동일한 이벤트가 상위-하위 요소를 트리거할 때 모든 하위 요소에 대해 서로 다른 기능을 실행할 수 있습니다.

위 내용은 JavaScript에서 인라인 onclick 속성을 사용하여 이벤트 전파를 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!