찾다

집  >  기사  >  웹 프론트엔드  >  jquery 이벤트 버블링 소개 및 이벤트 버블링을 방지하는 방법_jquery

jquery 이벤트 버블링 소개 및 이벤트 버블링을 방지하는 방법_jquery

WBOY
WBOY원래의
2016-05-16 17:45:41892검색
JS 이벤트 버블링이란?
객체에서 특정 유형의 이벤트(예: onclick 이벤트)를 트리거합니다. 객체가 이 이벤트에 대한 핸들러를 정의하면 이 이벤트 핸들러가 정의되지 않은 경우 이 이벤트가 호출됩니다. 이벤트가 true를 반환하면 이 이벤트는 처리될 때까지(상위 개체의 모든 유사한 이벤트가 활성화됨) 개체 계층의 최상위 수준에 도달할 때까지 이 개체의 부모 개체에 내부에서 외부로 전파됩니다. , 즉 문서 개체(일부 브라우저의 창)입니다.

Jquery 이벤트 버블링을 중지하는 방법은 무엇입니까?
작은 예를 들어 설명
코드 복사 코드는 다음과 같습니다.

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%>


Porschev---Jquery 이벤트 버블링






나를 클릭하세요






예를 들어 위 페이지에서
은 세 개의 레이어로 구분됩니다. divOne은 외부 레이어, divTwo는 중간 레이어, hr_3은 가장 안쪽 레이어입니다.
모두 자체 클릭 이벤트가 있으며 가장 내부 a 태그에도 href 속성이 있습니다.
페이지를 실행하고 "클릭하세요"를 클릭하면 다음과 같이 순서대로 나타납니다. 나는 가장 안쪽 레이어입니다---->나는 중간 레이어입니다--->나는 가장 바깥쪽 레이어입니다-- -->바이두 링크
원래는 ID가 hr_3인 라벨만 클릭했는데 실제로는 3개의 경고 작업이 실행되었습니다.
이벤트 버블링 프로세스(태그 ID로 표시됨): hr_two---->divTwo---->divOne. 가장 안쪽 층에서 가장 바깥쪽 층으로 버블링됩니다.

중지하는 방법
1.event.stopPropagation()
코드 복사 코드는 다음과 같습니다.


$(function(){
$("#hr_two").click (function( event){
event.stopPropagation();
})
})