> 웹 프론트엔드 > JS 튜토리얼 > js는 기본 이벤트를 방지하고 js는 이벤트 버블링을 방지합니다. js는 버블링 이벤트를 방지합니다.

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

jacklove
풀어 주다: 2018-06-15 16:48:22
원래의
1679명이 탐색했습니다.

중첩된 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);
로그인 후 복사
로그인 후 복사

설명: 링크를 클릭하면 아래에서 점프가 발생합니다. 하지만 이제 기본 이벤트인 점프 이벤트를 차단하여 바이두로 점프하지 않습니다.

  1. 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);
로그인 후 복사
로그인 후 복사

설명: 링크를 클릭하면 아래에서 점프가 발생합니다. 하지만 이제 기본 이벤트인 점프 이벤트를 차단하여 바이두로 점프하지 않습니다.

  1. 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의 json을 읽는 AJAX의 전체 프로세스

vue.js 설치 및 구성

위 내용은 js는 기본 이벤트를 방지하고 js는 이벤트 버블링을 방지합니다. js는 버블링 이벤트를 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿