집 > 기사 > 웹 프론트엔드 > js는 기본 이벤트를 방지하고 js는 이벤트 버블링을 방지합니다. js는 버블링 이벤트를 방지합니다.

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

jacklove원래의: 2018-06-15 16:48:221568검색

중첩된 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(&#39;c3&#39;).addEventListener(&#39;click&#39;,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(&#39;c3&#39;).addEventListener(&#39;click&#39;,function(e){e.stopPropagation()},false);

이 글에서는 js 차단 이벤트 버블링 예제와 js 차단 버블링 이벤트에 대해 설명합니다. 자세한 내용은 PHP 중국어 웹사이트를 참조하세요.

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

관련 기사