중첩된 p 요소의 경우 상위 요소와 하위 요소가 모두 일부 이벤트에 바인딩된 경우 가장 안쪽 하위 요소를 클릭하면 상위 요소의 이벤트가 트리거될 수 있습니다. 다음은 기본 이벤트를 방지하는 js와 이벤트를 방지하는 js에 대한 소개입니다. bubbling.예시를 참고하세요
1.event.preventDefault() – 요소의 기본 이벤트를 방지합니다.
참고: 요소의 클릭 점프에 대한 기본 이벤트,
버튼, 라디오 및 기타 양식 요소에 대한 기본 이벤트,
p 요소에는 기본 이벤트가 없습니다.
예:
<a href="http://www.baidu.com" target="_black">百度</a>var samp = document.getElementByTagName("a"); samp.addEventListener("click",function(e){e.preventDefault()},false);
설명: 링크를 클릭하면 아래에서 점프가 발생합니다. 하지만 이제 기본 이벤트인 점프 이벤트를 차단하여 바이두로 점프하지 않습니다.
event.stopPropagation(); – 요소 버블링 이벤트 방지
참고: 중첩된 요소에는 일반적으로 특정 효과가 있는 버블링 이벤트가 있습니다.
예:
<p id="c1" onclick="alert(1)"> <p id="c2" onlick="alert(2)"> <input type="button" id="c3" value="点击" onclick="alert(3)"> </p> </p>
여기에서 버튼을 클릭하면 브라우저가 팝업됩니다. 원래는 버튼에 바인딩된 이벤트만 발생하기를 원했지만 실수로 두 부모에서 이벤트가 발생했습니다. 여기서는 프로젝트 개발 중에 간단한 테스트를 수행했습니다. 버튼과 그 부모가 동시에 매우 중요한 이벤트에 바인딩되면 결과는 비참해질 것입니다. 이때 해결 방법은 버블링 이벤트를 방지하는 것입니다.
입력에 대한 클릭 이벤트를 등록하고 버블링 이벤트를 방지하세요
document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);
중첩된 p 요소의 경우 상위 요소와 하위 요소가 모두 일부 이벤트에 바인딩된 경우 가장 안쪽 하위 요소를 클릭하면 상위 요소가 트리거될 수 있습니다. 이벤트는 여기에서 확인하세요. 는 기본 이벤트를 방지하는 js와 이벤트 버블링을 방지하는 js의 예입니다.
1. event.preventDefault() – 요소의 기본 이벤트를 방지합니다.
참고: 요소의 클릭 점프에 대한 기본 이벤트,
버튼, 라디오 및 기타 양식 요소에 대한 기본 이벤트,
p 요소에는 기본 이벤트가 없습니다.
예:
<a href="http://www.baidu.com" target="_black">百度</a>var samp = document.getElementByTagName("a"); samp.addEventListener("click",function(e){e.preventDefault()},false);
설명: 링크를 클릭하면 아래에서 점프가 발생합니다. 하지만 이제 기본 이벤트인 점프 이벤트를 차단하여 바이두로 점프하지 않습니다.
event.stopPropagation(); – 요소 버블링 이벤트 방지
참고: 중첩된 요소에는 일반적으로 특정 효과가 있는 버블링 이벤트가 있습니다.
예:
<p id="c1" onclick="alert(1)"> <p id="c2" onlick="alert(2)"> <input type="button" id="c3" value="点击" onclick="alert(3)"> </p> </p>
여기에서 버튼을 클릭하면 브라우저가 팝업됩니다. 원래는 버튼에 바인딩된 이벤트만 발생하기를 원했지만 실수로 두 부모에서 이벤트가 발생했습니다. 여기서는 프로젝트 개발 중에 간단한 테스트를 수행했습니다. 버튼과 그 부모가 매우 중요한 이벤트에 동시에 바인딩되면 그 결과는 비참할 것입니다. 이때 해결 방법은 버블링 이벤트를 방지하는 것입니다.
입력에 대한 클릭 이벤트를 등록하고 버블링 이벤트를 방지하세요
document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);
이 글에서는 js 차단 이벤트 버블링 예제와 js 차단 버블링 이벤트에 대해 설명합니다. 자세한 내용은 PHP 중국어 웹사이트를 참조하세요.
관련 권장사항:
네이티브 JS의 json을 읽는 AJAX의 전체 프로세스
위 내용은 js는 기본 이벤트를 방지하고 js는 이벤트 버블링을 방지합니다. js는 버블링 이벤트를 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!